mat-menú y botón en diferentes componentes

Si te encuentras con alguna parte que te causa duda puedes dejarlo en la sección de comentarios y trataremos de ayudarte lo mas rápido que podamos.

Solución:

Bueno, si quieres hacer algo como esto:

Menu


  Item 1
  Item 2

puedes codificar Me gusta esto:

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;

Puede ver el ejemplo anterior funcionando en esta demostración de stackblitz.

---

Otro enfoque

Otro enfoque es (creo que esto es lo que quieres): tu botón de disparo es dentro del padre (pero fuera del niño) y el menú en sí mismo se define dentro del niño componente.

Componente principal:

    Menu in other component



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

Componente hijo:

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

---

Otro enfoque más

Otro enfoque, similar al anterior, pero utilizando variables de referencia de plantilla (observe el exportAs en el decorador del componente hijo):

Componente principal:

    Menu in other component



export class ParentComponent 

Componente hijo:

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

Demostración de stackblitz

Aquí hay otra solución usando ng-content. Esa es mi forma preferida de ir.

mi-menú-personalizado-componente html:

  



  menu content

componente principal html:

  click me

Finalizando este artículo puedes encontrar las notas de otros gestores de proyectos, tú además puedes mostrar el tuyo si lo crees conveniente.

---

---

Utiliza Nuestro Buscador