Change slide-toggle text on toggle change

Question

I have a basic slide-toggle in my app.
I want to change the text of the slide-toggle based on the if the toggle is toggled or not. Basically display different text when the button is toggled.

I tried using toggleChange() method of slide-toggle but I'm unable to show that text when I reload.
Also since the function is called on toggle change, it displays text even when toggle goes to the off state as the toggle event is triggered. I want to change the text when the button is toggled but only save the toggled text when the save setting button is clicked.I think I'll have to use session or local storage to store the text message

I can't seem to figure out what to do now.

Please help.
Thanks in advance.

Here is my ts code

export class PolicyComponent implements OnInit {

  formGroup: FormGroup;
  policy3: boolean=false;
  policy4: boolean=false;
  message:string="Message1";
  test:boolean=false;

  disable:boolean=true;
serverData:any
  constructor(
    private formBuilder: FormBuilder,private policyService:PolicyService
  ) { }

  ngOnInit() {


  this.formGroup = this.formBuilder.group({
      Policy1: new FormControl(false, []),
      Policy2: new FormControl(false, [])
  });
  this.policyService.getPolicy().subscribe((response) => {
      this.serverData = response[0];
      if(this.serverData.policy1=="F")
      {
        this.policy3=false;
      }
      else this.policy3=true;

      if(this.serverData.policy2=="F")
      {
        this.policy4=false;
      }
      else this.policy4=true;


      this.formGroup.controls.Policy1.setValue(this.policy3);
      this.formGroup.controls.Policy2.setValue(this.policy4);
  });
  // if(this.formGroup.controls.Policy1.value)
  // {
  //   this.message="Message1";
  // }
  // else if(!this.formGroup.controls.Policy1.value){
  //   this.message="Message2";

  // }
   // this.policyService.getUserById(+ localStorage.getItem("policyId")).subscribe();
}

  onFormSubmit() {
    console.log("Policy1::"+this.formGroup.controls.Policy1.value);
    if(this.formGroup.controls.Policy1.value)
    {
      this.serverData.policy1="T";
    }
    else{
      this.serverData.policy1="F";
    }


    console.log("Policy2::"+this.formGroup.controls.Policy2.value);
    if(this.formGroup.controls.Policy2.value)
    {
      this.serverData.policy2="T";
    }
    else{
      this.serverData.policy2="F";
    }
    //this.policyService.updatePolicy(this.policy.id,{policy1:this.policy.policy1}).subscribe(err=>{console.log(err)});
    this.policyService.updateUser(this.serverData).subscribe(err=>{console.log(err)});
 //   alert(JSON.stringify(formValue, null, 2));
 this.disable=true;

  }

  onChange(ob: MatSlideToggleChange) {
    // this.policy3 = !this.policy3;
    this.disable=false;
  }

  onChange1(ob: MatSlideToggleChange) {
    // this.policy4 = !this.policy4;
    this.message="Slide";
    this.disable=false;
  }
  displayMessage()
  { console.log("Value is:"+this.formGroup.controls.Policy1.value);

    if(!this.formGroup.controls.Policy1.value)
    {
      this.message="Message1";
    }
    else if(this.formGroup.controls.Policy1.value){
      this.message="Message2";

    }

   }
}

Here is my template code:

<form class="example-form" [formGroup]="formGroup" (ngSubmit)="onFormSubmit()" ngNativeValidate>
  <mat-action-list>
    <mat-list-item > <mat-slide-toggle       
      (change)="onChange($event)"  (toggleChange)="displayMessage()"  formControlName="Policy1" >{{message}}</mat-slide-toggle></mat-list-item> 
    <mat-list-item > <mat-slide-toggle  (change)="onChange($event)"  formControlName="Policy2">Policy2</mat-slide-toggle></mat-list-item>

  </mat-action-list>
  <p>Form Group Status: {{ formGroup.status}}</p>

  <button mat-rasied-button [disabled]="disable" type="submit">Save Settings</button>
</form>

Answer 1

and another solution

<mat-slide-toggle #slide formControlName="enabled">
     <span>{{slide.checked?'label 1':'label 2'}}</span>
</mat-slide-toggle>

Answer 2

Please note the following about toggleChange, this is the reason they also have a dragChange event.

The event does not fire when the user drags to change the slide toggle value.

My personal preference would be to use (change) in this scenario, and evaluate the event to see if e.checked is true or false... this approach, it wouldn't matter if the toggle was a drag event or not, your method would be called on any change and only set the message if the toggle is in a checked state.

<mat-slide-toggle       
      (change)="onChange($event);displayMessage($event)"
        formControlName="Policy1" >{{message}}</mat-slide-toggle>
</mat-list-item>

 displayMessage(e){
    if(e.checked)
      this.message = 'toggled'
    else
      this.message = 'Slide me!'
  }

Stackblitz

https://stackblitz.com/edit/angular-g9w2p8?embed=1&file=app/slide-toggle-overview-example.ts