使用指令隐藏角材料垫标签

Question

I am using angular material tabs and I want to use directiveto hide tab element dynamically.

html template

<mat-tab-group>
  <!-- how to hide this using directive? -->
  <mat-tab appHideMe label="First"> Content 1 </mat-tab>
  <!-- like this -->
  <mat-tab *ngIf="false" label="Second"> Content 2 </mat-tab>
  <mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>

<div appHideMe>
  hidden
</div>
<div>
  visible
</div>

HideMe directive

    @Directive({
      selector: '[appHideMe]'
    })
    export class HideMeDirective implements AfterViewInit {
      constructor(
        private el: ElementRef
      ) { }
    
      ngAfterViewInit() {
        this.el.nativeElement.style.display = 'none';
      }
    }

As during compilation, mat-tab is replaced so display = 'none' will not work. Is there any way how to hide mat-tab like *ngIf does (using HideMeDirective )?

Here is a stackblitz example.

---

I also want mat-tab to be toggleable. In this example I expect third to be visible but it is not.

template

<mat-tab-group>
  <!-- how to hide this using directive? -->
  <div>
    <mat-tab label="First"> Content 1 </mat-tab>
  </div>
  <div appHideMe="hide">
    <mat-tab label="Second"> Content 2 </mat-tab>
  </div>
  <div appHideMe>
    <mat-tab label="Third"> Content 3 </mat-tab>
  </div>
  <div>
    <mat-tab label="Fourth"> Content 4 </mat-tab>
  </div>

</mat-tab-group>

<div appHideMe>
  hidden
</div>
<div>
  visible
</div>

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';
      }
    }

As long as there is no HideMeDirective on div, mat-dat will be displayed. When HideMeDirective is added (see third mat-tab ), element is not visible. Any ideas?

Answer 1

Try Something like this

Define one variable

import { Directive, ElementRef, AfterViewInit,ChangeDetectorRef } from '@angular/core';   
@Directive({
    selector: '[appHideMe]',
    exportAs:'appHideMe',  
})
    
export class HideMeDirective implements AfterViewInit {   
    hide:Boolean;    
    constructor(
        private el: ElementRef,
        private cdr:ChangeDetectorRef
    ) { }
    
    ngAfterViewInit() {
        this.hide=false;
        this.cdr.detectChanges();
    }
}

Then use template ref

<mat-tab appHideMe #ref="appHideMe" label="First"> Content 1 </mat-tab>
<mat-tab *ngIf="ref.hide" label="Second"> Content 2 </mat-tab>

Example: https://stackblitz.com/edit/angular-mqc1co-vlw9aa

Answer 2

<mat-tab> is just another directive generating more code that you don't see before executing. You have to hide a specific div that gets an id depending on the quantity of tabs.

That is why your hide-directive on the <mat-tab> directive does not work.

You have to write a directive that targets these elements using the classes as selector.

this.el.nativeElement.children
   .find(child => child.querySelector('.mat-tab-label') !== null)
.style.display == "none"; // there might be a better solution than that

Answer 3

What about this:

<mat-tab-group>
  <mat-tab appHideMe label="First"> Content 1 </mat-tab>
<div appHideMe>
 <mat-tab label="Second"> Content 2 </mat-tab>
</div>

  <mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>