Скрыть угловой материал Mat-Tab с помощью директивы ⇐ Html

[Anonymous]

Я использую вкладки Angular Material, и я хочу использовать директиву для динамического скрытия элемента вкладки.

Код: Выделить всё

 Content 1 

 Content 2 
 Content 3 


hidden

visible

< /code>
HideMe

Директива

Код: Выделить всё

    @Directive({
selector: '[appHideMe]'
})
export class HideMeDirective implements AfterViewInit {
constructor(
private el: ElementRef
) { }

ngAfterViewInit() {
this.el.nativeElement.style.display = 'none';
}
}
< /code>
As during compilation, mat-tab

заменяется, поэтому Display = 'none' не будет работать. Есть ли способ скрыть Mat-tab , как *ngif do (используя hidemedirective )?
Вот пример Stackblitz.

Я также хочу, чтобы Mat-tab < /code> был включен. В этом примере я ожидаю, что третий будет видимым, но это не так.
шаблон

Код: Выделить всё

 Content 1 

 Content 2 

 Content 3 

 Content 4 



hidden

visible

< /code>
directive code
    @Directive({
selector: '[appHideMe]'
})
export class HideMeDirective implements AfterViewInit {

@Input() appHideMe: string;

constructor(
private el: ElementRef
) { }

ngAfterViewInit() {

if (this.appHideMe === 'hide') {
this.el.nativeElement.style.display = 'none';
}
// should be displayed
// this.el.nativeElement.style.display = 'none';
}
}
< /code>
As long as there is no HideMeDirective

on div, Mat-dat будет отображаться. Когда добавляется Hidemedirective (см. Третий Mat-tab ), этот элемент не виден. Есть идеи?


Подробнее здесь: https://stackoverflow.com/questions/518 ... -directive