CODEWITHSUNDEEP
angulartypescriptangular-material
MightyMorphingAndroidRanger
MightyMorphingAndroidRanger

Reputation: 299

How do I access mat menu trigger from typescript

I have the following html:

<button mat-icon-button #notificationMenuBtn [matMenuTriggerFor]="notificationsMenu">
</button>
<mat-menu #notificationsMenu="matMenu" [overlapTrigger]="false">
</mat-menu>

How to I access thematMenuTriggerFor on the notificaitonMenuBtn from typescript? I tried using a View Child (shown below) but I can't seem to bind it to the trigger, only to the button.

@ViewChild('notificationMenuBtn') notificationMenuBtn : MatMenuTrigger;
this.notificationMenuBtn.openMenu();

Upvotes: 10

Views: 19652

Answers (2)

jpierront
jpierront

Reputation: 221

If you really need to use an id (When you have several MatMenuTrigger)

@ViewChild('notificationMenuBtn', {read: MatMenuTrigger}) protected notificationMenuBtn : MatMenuTrigger;

Upvotes: 22

MightyMorphingAndroidRanger
MightyMorphingAndroidRanger

Reputation: 299

Figured it out. I just needed to use MatMenuTrigger instead of the element id.

@ViewChild(MatMenuTrigger) notificationMenuBtn: MatMenuTrigger;

Upvotes: 10

Related Questions