Error Component loading when try adding angular material

Question

I am trying to add angular material in my angular project. i have added angular material , below are my files.

app.module.ts

  import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';

  import { AppRoutingModule } from './app-routing.module';
  import { AppComponent } from './app.component';
  import {MatButtonModule, MatCheckboxModule} from '@angular/material';

  @NgModule({
    declarations: [
      AppComponent
    ],
    imports: [
      BrowserModule,
      AppRoutingModule,MatButtonModule, MatCheckboxModule
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }

app.component.ts

  import { Component } from '@angular/core';

  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {

    title = 'sp';
  }

app.component.html

  <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>
  </button>
  <router-outlet></router-outlet>

I am getting error while running :

There is no directive with "exportAs" set to "matMenu" ("]#appMenu="matMenu"> Settings Help "): ng:///AppModule/AppComponent.html@0:10 'mat-menu' is not a known element: 1

Which version of angular & material are you using? I believe it's just a version problem — Jacopo Sciampi

Amit Chigadani Amit Chigadani · Accepted Answer · 2018-10-02T12:39:27

You have to import MatMenuModule to use the selector mat-menu

imports: [
      BrowserModule,
      AppRoutingModule,
      MatButtonModule, 
      MatCheckboxModule,
      MatMenuModule
]

Error Component loading when try adding angular material

1 Answers