Angular 9: custom component a valid mat-menu-item

Question

i want use a custom component into MatMenu as MatMenuItem:

import { Component } from '@angular/core';

@Component({
  selector: 'my-custom-item',
  template: `<button>CustomItem</button>`
})
export class CustomItemComponent {}

@Component({
  selector: 'my-app',
  template: `
  <mat-menu>
    <button mat-menu-item>Foo</button>
    <my-custom-item mat-menu-item>Bar</my-custom-item>
  </mat-menu>
`,
})
export class AppComponent  {}

But it raise an exception:

Template parse errors: More than one component matched on this element. Make sure that only one component's selector can match a given element. Conflicting components: MatMenuItem,CustomItemComponent (" Help [ERROR ->] "): ng:///AppModule/AppComponent.html@3:4

see demo: https://stackblitz.com/edit/angular-9-material-starter-hfdrwr?file=src%2Fapp%2Fapp.component.ts

It is possible, make a custom component a valid mat-menu-item?

Answer 1

You want your component to behave like a MatMenuItem, to achieve that your custom component should extend from MatMenuItem.

Here is the link to an example from Angular Material. It's for a different component type. But i'm mostly sure the steps you have to take is the same. Also check the API of MatFormField used in the example and also API of MatMenu to compare and create your custom component