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

[tdekoekkoek]

Bug, feature request, or proposal:

I've imported MdMenu into my module and now am trying to add a menu trigger to my button

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

What is the expected behavior?

Trigger menu

What is the current behavior?

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

What are the steps to reproduce?

Providing a Plunker (or similar) is the best way to get the team to see your issue.
Plunker template: http://plnkr.co/edit/o077B6uEiiIgkC0S06dd

What is the use-case or motivation for changing an existing behavior?

Which versions of Angular, Material, OS, browsers are affected?

Is there anything else we should know?

[crisbeto]

What version of Material are you using? The camel cased property was introduced in beta.0.

[vkishorekumar80]

@tdekoekkoek please have a look at the plunker for the menu trigger option.
mdMenuTriggerFor is only available with beta release onwards.

http://plnkr.co/edit/AX4x0BEKYhma720euUZc?p=preview

[tdekoekkoek]

Thanks I will check.

[fabriziodebortoli]

use md-menu-trigger-for instead of mdMenuTriggerFor

<button md-icon-button [md-menu-trigger-for]="menu"> <md-icon>more_vert</md-icon> </button>

Documentation is not updated

There is a pr: #2420

[jelbourn]

Cannot reproduce- please include the version of material you're using with future issues.

[shijithkm]

How to bind menu name dynamically like this [mdMenuTriggerFor]="link.subMenu"

This is not working.

[timdoes]

I am getting the same error when running tests. It functions as expected on the website but I cannot get my tests to pass since I am getting this error:

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

Versions

@angular/cli: 1.0.3
node: 7.10.0
os: darwin x64
@angular/animations: 4.1.1
@angular/common: 4.1.1
@angular/compiler: 4.1.1
@angular/core: 4.1.1
@angular/forms: 4.1.1
@angular/http: 4.1.1
@angular/material: 2.0.0-beta.3
@angular/platform-browser: 4.1.1
@angular/platform-browser-dynamic: 4.1.1
@angular/router: 4.1.1
@angular/cli: 1.0.3
@angular/compiler-cli: 4.1.1
@angular/language-service: 4.1.1
@angular/service-worker: 1.0.0-beta.11

Button

<button [mdMenuTriggerFor]="userMenu">Settings</button>

[eebergman]

Using cli menu works just fine with ng serve, fails tests as

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

Fixed by importing ‘MaterialModule’ to TestBed.configureTestingModule in failing spec.

Versions

Node-v8.0.0
os - Sierra

@angular/cli: 1.1.0
@angular/compiler-cli: 4.0.0

@angular/animations: 4.1.3
@angular/common: 4.0.0
@angular/compiler: 4.0.0
@angular/core: 4.0.0
@angular/forms: 4.0.0
@angular/http: 4.0.0
@angular/material: 2.0.0-beta.6
@angular/platform-browser: 4.0.0
@angular/platform-browser-dynamic: 4.0.0
@angular/router: 4.0.0

Button

<button md-button [mdMenuTriggerFor]="menu">Vehicles</button>

[Splaktar]

I ran into this as well and it was just because the MdMenuModule was loaded in another module, but not in the module that I was using it in. Be careful about what's imported into your SharedModule and lazy loaded Modules if you run into this issue.

[jefferson-lima]

I'm having the same problem here with the latest version.

package.json

...
"dependencies": {
    "@angular/animations": "^4.3.3",
    "@angular/cdk": "github:angular/cdk-builds",
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/flex-layout": "^2.0.0-beta.8",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/material": "github:angular/material2-builds",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "core-js": "^2.4.1",
    "hammerjs": "^2.0.8",
    "rxjs": "^5.4.1",
    "zone.js": "^0.8.14"
  }
...

app.module.ts

...
import { MdInputContainer } from '@angular/material';
...
@NgModule({
  declarations: [
    AppComponent,
    NoteCardComponent,
    EditNoteComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MdCardModule,
    MdToolbarModule,
    MdSidenavModule,
    MdButtonModule,
    MdIconModule,
    FlexLayoutModule,
    MdInputContainer,
    MdMenuModule,
    MdInputModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
...

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

[hardikgw]

How to assign menu name when its generated dynamically?
[mdMenuTriggerFor]="menu{{mindex}}"

[mdolders]

Has anyone a solution for this ?

How to assign menu name when its generated dynamically?
[mdMenuTriggerFor]="menu{{mindex}}"

[hetaljpatel]

I am having the same issue with MdMenuModel.
How to assign name dynamically to [mdMenuTriggerFor]?
e.g.[mdMenuTriggerFor] ="item.id"