CODEWITHSUNDEEP
angulartypescriptangular-material
Arvind Chourasiya
Arvind Chourasiya

Reputation: 17472

How to hide mat-checkbox from typescript file

I need to hide the mat-checkbox control from typescript file based on tab selection getting changed in my application.

This is html file code

<mat-checkbox (change)="OnChangeRed($event)" id="check1" class="example-margin" [checked]="matCheckboxRed"></mat-checkbox>

Tabs in the same html file

<div>    
<mat-tab-group #tabRef (selectedTabChange)="tabChanged(tabRef.selectedIndex)">
  <mat-tab label="ALL"></mat-tab>
  <mat-tab label="Actvie"></mat-tab>
  <mat-tab label="Inactive"></mat-tab>
  <mat-tab label="Deliverted"></mat-tab>
</mat-tab-group>    
</div>

When my tab change calling I need to hide checkbox

tabChanged(index)
{

}

How can I do that

Upvotes: 0

Views: 1154

Answers (1)

yazan
yazan

Reputation: 537

You can use ngModel with checkbox as follows:

<mat-checkbox *ngIf="show" (change)="OnChangeRed($event)" id="check1" class="example-margin" [checked]="matCheckboxRed"></mat-checkbox>

and in the tabChanged event you can change show value according to the tab that have been triggered:

show: boolean = true;

tabChanged(index)
{
   if(index == "your tab index"){
     this.show = false;
   }

}

Another approach using ViewChild:

<mat-checkbox #checkbox (change)="OnChangeRed($event)" id="check1" class="example-margin" [checked]="matCheckboxRed"></mat-checkbox>

and in ts file:

@ViewChild('checkbox') el:ElementRef;

    tabChanged(index)
    {
       if(index == "your tab index"){
     this.el.nativeElement.style.display='none';
       }
    }

Upvotes: 1

Related Questions