Mat slider toggle [checked] resets when change Mat Tab

Question

I have 3 mat tabs with a mat-slider-toggle. On the third mat-tab the mat-slider-toggle is removed using ngIf. However this seems to reset the checked value on the mat-slider. Moving back and forth between the first two tabs the slider value persists fine but the 3rd tab always resets the mat-slider-toggle. If the slider was selected on mat tab 1, move to mat tab 3 and then back to mat tab 1, the slider moves back to unchecked.

tab component.html

<div class="container">
 <mat-tab-group
  (selectedTabChange)="focusChange($event)"
  [selectedIndex]="searchIndex"
  class="selected-tab-{{tabGroup.selectedIndex}}" #tabGroup>
 <mat-tab label="tab 1">
  <os-case-list  [data]="'myCases'" [active]="active"></os-case-list>
 </mat-tab>
 <mat-tab label="tab 2">
  <os-case-list [data]="'allCases'" [active]="active"></os-case-list>
 </mat-tab>
 <mat-tab disabled>
  <ng-template mat-tab-label>
      <mat-form-field>
        <input matInput type="text" class="searchInput" placeholder="search" [(ngModel)]="searchTextTyping" (keydown)="stopProp($event)" onfocus="this.value=''">
      </mat-form-field>
      <button mat-button class="searchBtn" (click)="searchCase()"><mat-icon>search</mat-icon></button>
  </ng-template>
  <os-case-list [data]="'seachText'" [active]="active" [searchText]="searchText"></os-case-list>
</mat-tab>

tab content component.html

  <div class="actions">
   <div>
    <mat-slide-toggle *ngIf="active !== 2" [checked]="sliderChecked" (change)="getClosedCases($event)">{{ 'CASES.closed' | translate }}</mat-slide-toggle>
   <h4 *ngIf="active === 3 && noSearchResults === false">{{ 'SEARCH.searchResults' | translate }}</h4>
   <h4 *ngIf="noSearchResults === true">{{ 'SEARCH.noSearchResults' | translate }}</h4>
 </div>

tab content component.ts functions that have my current failing logic to persist the mat-slider-toggle checked value

  isClosedTabOne: boolean;
  isClosedTabTwo: boolean;
  sliderChecked: boolean;

  ngOnChanges(changes) {
   if (changes.active.currentValue === 0) {
    this.isClosedTabOne = this.sliderChecked;
    console.log('SLIDERCHECKED', this.sliderChecked)
   }
   if (changes.active.currentValue === 1) {
    this.isClosedTabTwo = this.sliderChecked;
    console.log('SLIDERCHECKED', this.sliderChecked)
   } 
  }

  getClosedCases(event) {
   if (this.active === 0) {
     this.isClosedTabOne = event.checked;
  } else if (this.active === 1) {
   this.isClosedTabTwo = event.checked;
  }
 }

my current issue is that ngOnChanges is called three times since I have three @Input variables but after the first go through of ngOnChanges() the isClosedTabOne/Two variable changes from true/false to undefined. I can't figure out why that value is being set to undefined.

Any help or suggestions would be much appreciated.

G. Tranter G. Tranter · Accepted Answer · 2018-07-20T18:30:01

Nowhere in your code do I see the toggle's model sliderChecked being updated - it is only ever read. So any time a change cycle happens (like when you switch tabs), the slider resets to the original unchanged sliderChecked value. You need to update the toggle's model when it is used - either do that in your change function getClosedCases() or bind read-write with [(ngModel)]="sliderChecked" instead of read-only [checked]="sliderChecked".

Mat slider toggle [checked] resets when change Mat Tab

1 Answers