mat-menu and button in different components

Question

I have

...

in app-save-document component and

&         


        

Answer 1

Well, if you want to do something like this:

Menu


  Item 1
  Item 2

You can code like this:

import {Component,Input} from '@angular/core';
import {MatMenu} from '@angular/material';

@Component({
  selector: 'other-component',
  template: `
    This button is in another component:
    Click here to open menu
  `,
})
export class OtherComponent {
  @Input() matMenu: MatMenu;
}

You can see the above example working at this stackblitz demo.

---

Another approach

Another approach is (I think this is what you want): your trigger button is inside the parent (but outside the child) and the menu itself is defined inside the child component.

Parent component:

    Menu in other component



export class ParentComponent {
  @ViewChild(ChildComponent) childComponentMenu: ChildComponent;
}

Child Component:

@Component({
  selector: 'child-component',
  template: `
    
      Item 1 (inside other component)
      Item 2 (inside other component)
    
  `,
})
export class ChildComponent {
  @ViewChild(MatMenu, {static: true}) menu: MatMenu;
}

---

Yet Another approach

Another approach, similar to the above one, but using template reference variables (notice the exportAs in the decorator of the child component):

Parent component:

    Menu in other component



export class ParentComponent {
}

Child Component:

@Component({
  selector: 'child-component',
  template: `
    
      Item 1 (inside other component)
      Item 2 (inside other component)
    
  `,
  exportAs: 'menuInOtherComponent',
})
export class ChildComponent {
  @ViewChild(MatMenu, {static: true}) menu: MatMenu;
}

Stackblitz demo