保存垫子滑动切换的切换状态

Question

I'm using slide-toggle in a aproject.However I am unbale to save the toggled stae.Everytime I refresh the page,the slide toggle returns to default state instead of remaining in the toggled state.I'm new to angular and don't know what to do.Please help.Thanks in advance.

Here is the ts code:

export class ToggleComponent implements OnInit {
  @Output()
  change: EventEmitter<MatSlideToggleChange> ;
  @Input()
checked: Boolean 
  ngOnInit() {
  }
  isChecked = true;
  formGroup: FormGroup;
  filteringSchedule: boolean ;
  toggle:Boolean;

  constructor(formBuilder: FormBuilder) {
    this.formGroup = formBuilder.group({
      enableWifi: false,
      acceptTerms: [false, Validators.requiredTrue]
    });
  }

  onFormSubmit(formValue: any) {
    alert(JSON.stringify(formValue, null, 2));
  }

  onChange(ob: MatSlideToggleChange) {
    this.filteringSchedule=!this.filteringSchedule;
    console.log(!this.filteringSchedule);
  } 
}

The template code:

<form class="example-form" [formGroup]="formGroup" (ngSubmit)="onFormSubmit(formGroup.value)" ngNativeValidate>
  <mat-action-list>
    <mat-list-item > <mat-slide-toggle  (change)="onChange($event)"  [checked]="filteringSchedule"  formControlName="enableWifi" >Enable Wifi</mat-slide-toggle></mat-list-item> 
    <mat-list-item > <mat-slide-toggle formControlName="acceptTerms">Accept Terms of Service</mat-slide-toggle></mat-list-item>
</mat-action-list>
  <p>Form Group Status: {{ formGroup.status}}</p>

  <button mat-rasied-button type="submit">Save Settings</button>
</form>

Answer 1

Store your toggle property in localStorage and then you can retrieve localStorage value on ngOnInit method.

You can even use sessionStorage based on your requirement. Use of localStorage and sessionStorage is almost identical, you just need to replace one with another.

onChange(ob: MatSlideToggleChange) {
  this.filteringSchedule = !this.filteringSchedule;
  localStorage.setItem('yourKey', JSON.stringify(this.filteringSchedule));
}

ngOnInit() {
  this.filteringSchedule = localStorage.getItem('yourKey') == 'true';
}

Answer 2

Web storages can be used to retain the state of the toggle button (toggled button doesn't change on the page refresh).

Here I've made aWorking Stackblitz Demo with the code you have provided for your app. I've used local-storage to achieve the desired feature.

Your ToggleComponent is updated below:-

import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core';
import { MatSlideToggleChange } from '@angular/material';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'app-toggle',
  templateUrl: './toggle.component.html',
  styleUrls: ['./toggle.component.css']
})
export class ToggleComponent implements OnInit {
  @Output() change: EventEmitter<MatSlideToggleChange>;
  @Input() checked: boolean;

  isChecked = true;
  formGroup: FormGroup;
  filteringSchedule: boolean;
  toggle: boolean;

  constructor(
    private formBuilder: FormBuilder
  ) { }

  ngOnInit() {
    this.filteringSchedule = JSON.parse(localStorage.getItem('toggleButtonState'));
    this.formGroup = this.formBuilder.group({
      enableWifi: this.filteringSchedule,
      acceptTerms: [false, Validators.requiredTrue]
    });
  }

  onFormSubmit(formValue: any) {
    alert(JSON.stringify(formValue, null, 2));
  }

  onChange(ob: MatSlideToggleChange) {
    this.filteringSchedule = !this.filteringSchedule;
    localStorage.setItem('toggleButtonState', JSON.stringify(this.filteringSchedule));
  }
}

Also note:- To be consistent for the user across all browsers in addition (or instead of) to storing toggled state of the button in cookies/local storage you can store it server side and when loading the site get the info about the toggled button state from the server.

On a side note form builder code, you have placed inside the constructor should be kept inside ngOnInit , to avoid performance issues with the app.

Hope this is helpful.