Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular Material Menu module: Export of name 'matMenu' not found

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?

like image 940
Ferenc Bablena Avatar asked May 15 '20 10:05

Ferenc Bablena


People also ask

How to implement menu items in angular?

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.

What is the <mat-menu> element?

<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.

How to navigate to a particular route using matmenulistitem in angular?

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.

What is @angular material?

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.


4 Answers

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();
  });
like image 85
Ievgen Avatar answered Oct 16 '22 09:10

Ievgen


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';

like image 22
ninoorta Avatar answered Sep 16 '22 14:09

ninoorta


I had the same problem and a server restart fixed it.

like image 32
Jadamae77 Avatar answered Oct 16 '22 11:10

Jadamae77


I had the same problem - close your terminal and again start server (ng serve).

like image 4
Naveen Patel Avatar answered Oct 16 '22 10:10

Naveen Patel