I am wrapping the angular material menu component. I am extending the MatMenuTrigger, MatMenuItem, making them as separate directives and using it in parent component. In the child component(Menu component), i am only using the mat-menu for the getting the reference and in the parent component(Menu-demo component), attaching the menu(which is in child component) to whichever control we want. I should not use button tag inside the child component,so i used ng-content to the get content from the parent.I just want to expose some property to get that reference. Here my question is how to wrap this reference menu, stackblitzlink. Please help me out in this,thanks in advance.
1 Answers
The menu directive is not necessary. You can expose the child MatMenu and reference it as a property of the containing component and use it directly with the MatMenuTrigger directive:
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>
Usage:
<button mat-raised-button [matMenuTriggerFor]="menu.matMenu">home</button>
<sq-menu #menu>
<button mat-button>
Item1
</button>
</sq-menu>
Related