angular - Toggling the menu programmatically if I have more than one menu? -

if having 2 menu component in template below

<button md-icon-button [md-menu-trigger-for]="menu">     <md-icon>more_vert</md-icon> </button> <md-menu #menu="mdmenu">   <button md-menu-item>refresh</button>   <button md-menu-item>settings</button>   <button md-menu-item>help</button>   <button md-menu-item disabled>sign out</button> </md-menu>  <button md-icon-button [md-menu-trigger-for]="menu1">     <md-icon>more_vert</md-icon> </button> <md-menu #menu1="mdmenu">   <button md-menu-item>refresh</button>   <button md-menu-item>settings</button>   <button md-menu-item>help</button>   <button md-menu-item disabled>sign out</button> </md-menu> 

how programatically toggle second menu component?. @viewchild(mdmenutrigger) can use following if have 1 menu component in template. there way specifying component name in @viewchild find out nth menu component , open menu programatically?

first, need hook afterviewinit component

class yourcomponent implements afterviewinit {

then can using @viewchildren, instead of

@viewchildren(mdmenutrigger) triggers: querylist<mdmenutrigger>;  // use viewchildren list of menu element  ngafterviewinit() {    // inside ngafterviewinit lifecycle   // triggers    this.triggers.foreach((item)=>{     item.openmenu();   });  }