Невозможно использовать customDirective с mat-menu-item

Question

Я хочу использовать myCustomDirective с директивой mat-menu-item. Но myCustomDirective не применяется к элементу с mat-menu-item. И это также не вызывает никакой ошибки.

Я пытался использовать ng-container и ng-template, чтобы использовать myCustomDirective и mat-menu-item для разных элементов, но это не сработало.

<button mat-icon-button [matMenuTriggerFor]="menu">
  <mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu="matMenu" myCustomDirective="x">
  <button mat-menu-item>
     item1
  </button>
  <button mat-menu-item myCustomDirective="y">
    item2
  </button>
  <button mat-menu-item myCustomDirective="z">
     item3
  </button>
</mat-menu>


@Directive({
    selector: '[myCustomDirective]'
})
export class MyCustomDirective {

       @Input() myCustomDirective: string;

        constructor( private element: ElementRef,
        private renderer: Renderer2
        ) { }

        ngAfterViewInit() {
            console.log(this.myCustomDirective);
            this.renderer.setStyle(this.element.nativeElement, 
               'border-style', 'dashed');
        }
}

Ожидается: MyCustomDirective должен применяться к mat-menu-item Фактически: MyCustomDirective не применяется