Click method on @Viewchild element not working

Question

I'm trying to simulate a click on a button in Angular. But it's not working. I imported ViewChild and ElementRef. Then added the hash reference to the button. and then called the click but it's not working. this is the HTML:

  <button #filterPanelButton id="loadFiltersButton" class="details-filters-button" mat-button [ngClass]="{'filter-button-active': loadButtonChanged}"
        type="button"[matMenuTriggerFor]="loadDetailsFilter" (menuOpened)="detailsFiltersOpened()">
        <span id="loatFilterButtonText" class="details-filters-button-text">{{loadButtonText}}</span>
        <mat-icon class="menu-active" [ngClass]="{'menu-open': arrowUp}">arrow_drop_down</mat-icon>
    </button>

and this is the .ts method:

lauchSearchAndCLoseFiltersPanel($event){
    this.detailsFiltersClosed($event);
    // document.getElementById('loadFiltersButton').click();
    this.filterPanelButton.nativeElement.click();
}

If I uncomment the document.getElementById('loadFiltersButton') it works, but I've heard that it is discouraged to use that method in Angular.

Why might the viewChild method not be working?

Share complete code that makes the ```@ViewChild()``` part visible and whatever other codes that can make us understand the problem you are facing. — adibro500, Jul 23 '21 at 16:59
What you want to do is click on the button and send some data to your .ts file right? Why not simply use built-in (click) event? If you are set on using ViewChild with click , you can use the method in this post : https://stackoverflow.com/questions/60004074/how-to-write-click-event-for-viewchild-element-reference-in-angular-8 — usalin, Jul 23 '21 at 17:19

score 2 · Answer 1 · answered Jul 23 '21 at 17:10

2

the correct way would be not to work with low level events, but to call the openMenu

@ViewChild(MatMenuTrigger) trigger

lauchSearchAndCLoseFiltersPanel(){
    this.trigger.openMenu();
}

answered Jul 23 '21 at 17:10

Andrei

10,117
13
21

I'm seeing the problem is that 'mat-menu' is not a nativeElement. I think that's why it doesn't accept the '.nativeElement' method... So how can I attach a click if I can't use nativeElement? – Julio Rodriguez Jul 23 '21 at 18:47
1

you can query the element ref via `@ViewChild(..., {read: ElementRef})`. but usually if you need a elementRef then you really really need to manipulate the html element, or you are doing something terribly wrong, so I would stick to calling `openMenu` method – Andrei Jul 23 '21 at 19:20

Wilt · Answer 2 · 2023-06-22T18:26:08.983

You probably got the MatButton class but in your case you need to make sure that you get the ElementRef from your @ViewChild decorator. To do that you can pass a second argument with a read property and explicitly set it to ElementRef like so:

@ViewChild('filterPanelButton', { read: ElementRef }) public filterPanelButton: ElementRef;

And now this should work:

this.filterPanelButton.nativeElement.click();

See also the answer on a similar question here.

Check for more information about the ViewChild and its read property also the official Angular documentation here.

read - Used to read a different token from the queried elements.

So if you're querying a MatButton with your selector (or another material component), you won't be able to get the nativeElement since you get the reference to the material component and not to the ElementRef.

Click method on @Viewchild element not working

2 Answers2