Как создать Angular элемент с Angular материалом?

Question

Я создаю Angular Элемент, в котором я использую Angular Материал дизайна. Содержимое материала не отображается в браузере, но отображается в DOM.

Мой шаблон элемента выглядит следующим образом:

<h1>Hello world!</h1>
<mat-menu #appMenu="matMenu">
  <button mat-menu-item>Settings</button>
  <button mat-menu-item>Help</button>
</mat-menu>

<button mat-icon-button [matMenuTriggerFor]="appMenu">
  <mat-icon>more_vert</mat-icon>Click Me!
</button>

Окончательный вывод

Answer 1

Для mat-menu оно не отображается внутри HTML, пока оно не видно.

Вы можете проверить это Демо нажмите на последнюю кнопку.

Answer 2

В angular CLI запустите:

ng add @angular/material

Затем добавьте модули в app.component.ts

import { MatMenuModule, MatIconModule } from '@angular/material/slider';

@NgModule ({
  imports: [
    ...,
    MatMenuModule,
    MatIconModule,
    ...
  ]
})

И любые другие компоненты, к которым вы будете sh использовать.