Can't bind to 'mdMenuTriggerFor' since it isn't a known property of 'button'

Question

I'm getting this error when running my angular app with ng serve:

Can't bind to 'mdMenuTriggerFor' since it isn't a known property of 'button'

I have imported everything needed so i can't understand why it happens.

module.ts:

.......
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { BrowserModule } from '@angular/platform-browser';
import { MyDialogComponent } from './components/my-dialog/my-dialog.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatDialogModule, MatButtonModule, MatCheckboxModule, MatToolbarModule, MatInputModule, MatProgressSpinnerModule, MatCardModule, MatIconModule } from '@angular/material';
import { MatMenuModule} from '@angular/material/menu';
import 'hammerjs';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent,
    MainComponent,
    MyDialogComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    BrowserAnimationsModule,
    ReactiveFormsModule,
    FormsModule,
    MatDialogModule, MatButtonModule, MatCheckboxModule, MatToolbarModule, MatInputModule, MatProgressSpinnerModule, MatCardModule, MatMenuModule, MatIconModule
  ],
  entryComponents: [MyDialogComponent],
  providers: [DataService],
  bootstrap: [AppComponent]
})
export class AppModule { }

html:

<mat-toolbar>My App


  <span class="spacer"></span>
  <button md-icon-button [mdMenuTriggerFor]="menu">
      <md-icon>more_vert</md-icon>
    </button>

</mat-toolbar>

any reason for getting this error? I mean everything is imported as you can see, so why doesn't it run as it should?

score 2 · Accepted Answer · edited Oct 08 '18 at 08:03

If you're using latest @angular/material dependency, you should replace it by matMenuTriggerFor (mdMenuTriggerFor is deprecated):

<button mat-icon-button [matMenuTriggerFor]="menu">
   <mat-icon>more_vert</mat-icon>
</button>

and of course import your module

import {MatMenuModule} from '@angular/material/menu';

and add it to the imports block.

https://material.angular.io/components/menu/api

score 0 · Answer 2 · edited Oct 05 '18 at 16:19

If you are using a more up-to-date version of angular and materials then the names have changed. mdMenuTriggerFor has become matMenuTriggerFor, etc. i.e. basically md replaced by mat everywhere. Your example here would read ...

<button mat-icon-button [matMenuTriggerFor]="menu"> <mat-icon>more_vert</mat-icon> </button>

If you are using an older version of Angular/Materials maybe you didn't import the menu module from materials into your project?

Can't bind to 'mdMenuTriggerFor' since it isn't a known property of 'button'

2 Answers2