Невозможно получить доступ к элементам внутри углового материала

Question

Я пытаюсь использовать приведенный ниже код для доступа к кнопке внутри mat-menu по имени класса, но не работает:

TS:

constructor(private elem:ElementRef){
}

ngOnInit(){
 let elements = this.elem.nativeElement.querySelectorAll('.role-menu');
 console.log(elements);
}

HTML:

<button [matMenuTriggerFor]="menu1">Test</button>
<mat-menu yPosition="below" #menu1="matMenu">
<button mat-menu-item><mat-icon>account_box</mat-icon> My Profile</button>

 <button class="role-menu" mat-menu-item><mat-icon>lock</mat-icon> API Keys</button>

<button mat-menu-item><mat-icon>power_settings_new</mat-icon> Logout</button>
 </mat-menu>

Создал демо Stackblitz здесь

Answer 1

Угловой способ доступа к содержимому шаблона - через декораторы @ViewChild и @ViewChidren и ссылки на шаблоны:

HTML

<button [matMenuTriggerFor]="menu1">Test</button>
<mat-menu yPosition="below" #menu1="matMenu">
  <button mat-menu-item><mat-icon>account_box</mat-icon> My Profile</button>

  <button #roleMenuButton class="role-menu" mat-menu-item><mat-icon>lock</mat-icon> API Keys</button>

  <button mat-menu-item><mat-icon>power_settings_new</mat-icon> Logout</button>
</mat-menu>

TS

import { AfterViewInit, Component, ElementRef, QueryList, ViewChildren } from '@angular/core';
...
@ViewChildren('roleMenuButton') roleMenuButtons: QueryList<ElementRef>;
...
ngAfterViewInit(){
  let elements = this.roleMenuButtons.toArray();
  console.log(elements);
}