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

AngularAngular MaterialKarma JasmineJestjs

Angular Problem Overview


I'm getting following error when I try to test an angular component:

Error while running jest tests:

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

Here is my html:

<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu">
  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 2</button>
</mat-menu>`

I'm using "@angular/material": "6.1.0", in my package.json. I've also imported all the required material dependencies in the beforeAll block under TestBed I also tried changing the property of the button from matMenuTriggerFor to mat-menu-trigger-for. It didn't work.

Please suggest how can I fix this test.

Angular Solutions


Solution 1 - Angular

Import MatMenuModule in your feature Module OR the Module where this component resides in.

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

and

imports: [
  MatMenuModule
]

Solution 2 - Angular

I think you need to add the MatMenuModule import to your app.module file.

Solution 3 - Angular

Random but in case someone was searching like me: I was importing a custom angular material library and building the consuming library before building the material library. when I built the material library first then the consuming library was about to see the MatMenuModule and errors went away.

I changed

"library:build": "npm run ng7-common:build" && npm run ng8-material:build

to:

"library:build": " npm run ng8-material:build && npm run ng7-common:build"

Solution 4 - Angular

Check the spelling I had one g in word trigger that cost me this error

[matMenuTrigerData] => [matMenuTriggerData] 

Solution 5 - Angular

I got this (and several other errors) because I failed to add the component to the declarations array in the lib.module.ts file.

Solution 6 - Angular

I was getting this error while running jest test. I had to add MatMenuModule in the import array of TestBed.configureTestingModule to resolve this error.

Solution 7 - Angular

If imports at other module, you need export MatMenuModule.

At your module, place:

... exports: [MatMenuModule], ...

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionRV.View Question on Stackoverflow
Solution 1 - AngularSajeetharanView Answer on Stackoverflow
Solution 2 - AngularPaulView Answer on Stackoverflow
Solution 3 - AngularSankofaView Answer on Stackoverflow
Solution 4 - AngularIrina DanovichView Answer on Stackoverflow
Solution 5 - AngularTrevorView Answer on Stackoverflow
Solution 6 - AngularArvind YadavView Answer on Stackoverflow
Solution 7 - AngularAndre MesquitaView Answer on Stackoverflow