Components: Can't bind to 'matMenuTriggerFor' since it isn't a known property of 'button'. ("">

[devynenterprise]

Bug, feature request, or proposal:

this is for beta11

What is the expected behavior?

should bind submenu to button

What is the current behavior?

does not do that

What are the steps to reproduce?

try to bind [matMenuTriggerFor]="someSubMenu"

Providing a Plunker (or similar) is the best way to get the team to see your issue.
Plunker template: https://goo.gl/DlHd6U

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

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

Material beta 11

Is there anything else we should know?

[josephperrott]

Can you provide a reproduction of the issue?

Based on the error you are receiving it appears that you are not importing MatMenuModule

[crisbeto]

It looks like you could be on an older Angular version. Can you update to 4.4.3?

[devynenterprise]

I did it fixed the error!

However, now it does not like

import {MatSnackBar} from '@angular/material'

suggestions?

[crisbeto]

What error are you getting?

[devynenterprise]

Module '"path/to/node_modules/@angular/material/material"' has no exported member 'MatSnackBar'.

[crisbeto]

You should be able to import MdSnackBar.

[devynenterprise]

I thought it was called MatSnackBar with the prefix changes

[crisbeto]

We're still in the process of renaming a lot of things. See https://github.com/angular/material2/pull/7241.

[devynenterprise]

So for the time being, should I be using MdSnackBar?

But my module is MatSnackBarModule?

[crisbeto]

Yes, it is a little confusing but it will be sorted out by the time we hit stable. Your IDEs autocompletion should be able to give you the proper import names.

[devynenterprise]

Okay, is MdSnackBar now considered a service?

[devynenterprise]

I dont understand why an npm package is provided that renames everything to Mat from Md, however this is not stable. This may ruin alot of peoples code.

[axtho]

It does ruin a lot of code. I also though that the tool would grab what is changeable, but it seems that it converted too much (i have similar issues with Modules like mat-option not liking [value] and styles being completely off). There should be a warning about using this service.

[josephperrott]

Closing as the issue was resolved by updating to @angular/[email protected]

[bibekananda-pradhan]

getting the same issue, please help me.

[ghost]

Facing same issue with newer versions of material and angular. I only face the issue running the test specs. I will upgrade these to see if it still occurs.

Steps:
Used this template HTML reference https://stackblitz.com/angular/rkjvvyxqymb?file=app%2Fmenu-overview-example.ts and generated a component with angular cli. Run the test and boom 💥

Node: v8.9.4
NPM: v5.6.0

"@angular/animations": "^5.2.4",
"@angular/cdk": "^5.2.1",
"@angular/common": "^5.2.4",
"@angular/compiler": "^5.2.4",
"@angular/core": "^5.2.4",
"@angular/forms": "^5.2.4",
"@angular/http": "^5.2.4",
"@angular/material": "^5.2.1",
"@angular/platform-browser": "^5.2.4",
"@angular/platform-browser-dynamic": "^5.2.4",
"@angular/router": "^5.2.4",

[DougReynolds]

I am experiencing the same as @Gavintek.
Angular CLI: 6.0.7 Node: 10.1.0 OS: darwin x64 Angular: 6.0.3
@angular-devkit/architect 0.6.7 @angular-devkit/build-angular 0.6.7 @angular-devkit/build-optimizer 0.6.7 @angular-devkit/core 0.6.7 @angular-devkit/schematics 0.6.7 @angular/cdk 6.2.0 @angular/cli 6.0.7 @angular/material 6.2.0 @ngtools/webpack 6.0.7 @schematics/angular 0.6.7 @schematics/update 0.6.7 rxjs 6.2.0 typescript 2.7.2 webpack 4.8.3

Test Spec:

`import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';
import { ToolmenuComponent } from './toolmenu/toolmenu.component';
import { ToolboxComponent } from './toolbox/toolbox.component';

describe('AppComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
AppComponent,
ToolmenuComponent,
ToolboxComponent
],
}).compileComponents();
}));
it('should create the app', async(() => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app).toBeTruthy();
}));
.....
});`

Implementation:
<button class="tool-menu" mat-button [matMenuTriggerFor]="imageMenu">Image Tools</button>

Karma Stack:

Can't bind to 'matMenuTriggerFor' since it isn't a known property of 'button'. ("

][matMenuTriggerFor]="imageMenu">Image Tools
@1:39
There is no directive with "exportAs" set to "matMenu" ("utton class="tool-menu" mat-button [matMenuTriggerFor]="imageMenu">Image Tools
]#imageMenu="matMenu" [overlapTrigger]="false">
Item 1
html@2:12
Can't bind to 'overlapTrigger' since it isn't a known property of 'mat-menu'.

1. If 'mat-menu' is an Angular component and it has 'overlapTrigger' input, then verify that it is part of this module.
2. If 'mat-menu' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("u" mat-button [matMenuTriggerFor]="imageMenu">Image Tools

][overlapTrigger]="false">
Item 1
Item 2<"): ng:///DynamicTestModule/ToolmenuComponent.html@2:33
'mat-menu' is not a known element:

If 'mat-menu' is an Angular component, then verify that it is part of this module.

If 'mat-menu' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("bar">

Image Tools
[ERROR ->]
Item 1
"): ng:///DynamicTestModule/ToolmenuComponent.html@2:2
Can't bind to 'matMenuTriggerFor' since it isn't a known property of 'button'. ("
Item 2

][matMenuTriggerFor]="svgMenu">SVG Tools
html@6:39
There is no directive with "exportAs" set to "matMenu" (" SVG Tools
]#svgMenu="matMenu" [overlapTrigger]="false">
Item 1
html@7:12
Can't bind to 'overlapTrigger' since it isn't a known property of 'mat-menu'.

If 'mat-menu' is an Angular component and it has 'overlapTrigger' input, then verify that it is part of this module.

If 'mat-menu' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("ol-menu" mat-button [matMenuTriggerFor]="svgMenu">SVG Tools

][overlapTrigger]="false">
Item 1
Item 2<"): ng:///DynamicTestModule/ToolmenuComponent.html@7:31
'mat-menu' is not a known element:

If 'mat-menu' is an Angular component, then verify that it is part of this module.

If 'mat-menu' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("mat-menu>

SVG Tools
[ERROR ->]
Item 1
"): ng:///DynamicTestModule/ToolmenuComponent.html@7:2
at syntaxError (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/compiler/fesm5/compiler.js:215:1)
at TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/compiler/fesm5/compiler.js:14702:1)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/compiler/fesm5/compiler.js:22709:1)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/compiler/fesm5/compiler.js:22696:1)
at http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/compiler/fesm5/compiler.js:22639:48
at Set.forEach ()
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/compiler/fesm5/compiler.js:22639:1)
at http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/compiler/fesm5/compiler.js:22557:1
at Object.then (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/compiler/fesm5/compiler.js:206:33)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndAllComponents (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/compiler/fesm5/compiler.js:22555:1)

[DougReynolds]

It is not sufficient to add the imports to the application module, alone. To fix this issue, add imports into any component spec beforeEach that is using the material as well. e.g:

mycomponent.spec.ts
`imports: [ // Anything that uses the Materials lib needs to import in order to test

MatMenuModule,

MatIconModule,

MatButtonModule

]`
In this case i am using Menu, Icon, and Buttons

[rageycomma]

Thanks @DougReynolds - this works, however, it'd maybe be a bit better to update the documentation section for the API to show that more than 1 module is required for this?

At the moment I've had to do the same thing with other components, but it's just trial and error at this point. Everything else has worked perfectly :) <3

[JarekSour]

Same problem with angular v6.1.6, i have MatMenuModule, MatIconModule, MatButtonModule and MatSnackBarModule

[fabiomilheiro]

@JarekSour , how did you solve it?

[fabiomilheiro]

Well:
import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';

in the app.module.ts.

[btxtiger]

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

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}