I have a little issue with Angular Material Menu module.
I have this code in my app.module.ts:
import { SharedModule } from './shared/shared.module';
@NgModule({
declarations: [
// ...
],
imports: [
SharedModule,
],
})
export class AppModule { }
In my shared.module.ts:
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { MatMenuModule } from '@angular/material/menu';
import { ListDropdownComponent } from './list-dropdown/list-dropdown.component';
@NgModule({
declarations: [
ListDropdownComponent,
],
imports: [
MatMenuModule,
],
exports: [
ListDropdownComponent,
],
})
export class SharedModule { }
In my list-dropdown.component.ts:
import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core';
@Component({
selector: 'app-list-dropdown',
templateUrl: './list-dropdown.component.html',
styleUrls: ['./list-dropdown.component.scss']
})
export class ListDropdownComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}
In the list-dropdown.component.html:
<button mat-icon-button [matMenuTriggerFor]="menu">
My dropdown menu
</button>
<mat-menu #menu="matMenu">
<!-- ... -->
</mat-menu>
Then I have this error message:
Error: Export of name 'matMenu' not found!
I can't see where is the problem here?
To implement menu items in Angular we can use angular material menu module called MatMenuModule. mat-menu selector is used to display floating menu panel containing list of menu items.
<mat-menu> is a floating panel containing list of options. By itself, the <mat-menu> element does not render anything. The menu is attached to and opened via application of the matMenuTriggerFor directive: The menu exposes an API to open/close programmatically.
If you are using angular routes in your application we can navigate to that particular route on mat menu click event. Or we can add another property to the MatMenuListItem which represents angular route to navigate so that we can avoid the above if loop check.
Angular Material “has no exported member ‘MaterialModule’”. If you use @angular/material you are in for some big breaking changes. It is in beta, so you can’t really bitch about it. But, here is what to do about them, a) There is no more MaterialModule. The idea being, you import what you need.
I had the same problem executing the unit tests.
Solved by importing MatMenuModule to the TestBed:
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [MatMenuModule],
declarations: [YOURCOMPONENT],
}).compileComponents();
});
I got this problem today and what you need to do is just import this line below in the current component's module you using matMenu
import { MatMenuModule } from '@angular/material/menu';
I had the same problem and a server restart fixed it.
I had the same problem - close your terminal and again start server (ng serve).
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With