typescript - Envolviendo el Componente de Menú de Angular Material 6

Estoy envolviendo el componente de menú de Angular Material. Estoy extendiendo MatMenuTrigger, MatMenuItem, convirtiéndolos en directivas separadas y usándolos en el componente padre. En el componente hijo (componente de menú), solo estoy usando mat-menu para obtener la referencia y en el componente padre (componente Menu-demo), adjunto el menú (que está en el componente hijo) al control que queramos. No debo usar la etiqueta button dentro del componente hijo, así que usé ng-content para obtener el contenido del padre. Solo quiero exponer algunas propiedades para obtener esa referencia. Aquí está mi pregunta: ¿cómo envolver este menú por referencia, stackblitzlink? Por favor ayúdame con esto, gracias de antemano.

Respuesta #1

La directiva de menú no es necesaria. Puedes exponer el MatMenu hijo y referenciarlo como una propiedad del componente contenedor y usarlo directamente con la directiva MatMenuTrigger:

menu.component.ts:

@Component({
    selector: 'sq-menu',
    templateUrl: './menu.component.html',
})

export class MenuComponent {
   @ViewChild('menu') matMenu: MatMenu;
}

menu.component.html:

<mat-menu #menu="matMenu">
    <ng-content></ng-content>
</mat-menu>

Uso :

<button mat-raised-button [matMenuTriggerFor]="menu.matMenu">home</button>
<sq-menu #menu>
    <button mat-button>
        Item1
    </button>
</sq-menu>

StackBlitz