CODEWITHSUNDEEP
angulartypescriptangular-material
site
site

Reputation: 247

How to make my mat-slide-toggle change only when a result is true?

I have function that activates or not a mat-slide-toggle. I want to change this function, only when my result is false. But, my switch changes all of time, whether the result is true or false. I want that the switch doesn't change when the result is false.

Component ts

onActiveHomeboxP(homeboxpackageid, activeid, elem) {
    this.areWeWaiting = true;
    if (confirm('Are you sure to change Status?')) {
      let editHomeboxp = new HomeboxP(
        this.activeHomeboxPForm.value
      );
      editHomeboxp.homeboxpackage_id = homeboxpackageid;
      editHomeboxp.active = !activeid ? 1 : 0;
      this.ws.activatehomeboxp(editHomeboxp).subscribe(
        result => {
          if (result === true) {
            this.router.navigate(['/hbp']);
          } else {
            this.areWeWaiting = false;
          }
        },
        error => {
        }
      );
    } else {
      elem.checked = !elem.checked;
    }
  }

component html

<form [formGroup]="activeHomeboxPForm" class="col s12" >
        <span *ngIf="item.active === 1" >
          <section class="example-section">
            <mat-slide-toggle formControlName="active-{{item.homeboxpackage_id}}" class="example-margin" [checked]="item.active === 1" #elem (click)="onActiveHomeboxP(item.homeboxpackage_id, item.active, elem)" >
              </mat-slide-toggle>
          </section>
        </span>
         <span *ngIf="item.active === 0" >
          <section class="example-section">
            <mat-slide-toggle formControlName="active-{{item.homeboxpackage_id}}" class="example-margin" [checked]="item.active === 0" #elem (click)="onActiveHomeboxP(item.homeboxpackage_id, item.active, elem)">
               </mat-slide-toggle>
          </section>
        </span> 
   </form>

Please, can you ask me any idea, how do I make the switch not change when the result is false. Thnx

Upvotes: 1

Views: 10249

Answers (1)

Vedha Peri
Vedha Peri

Reputation: 1466

html file:

<mat-slide-toggle [checked]="yourFlag">Slide me!</mat-slide-toggle>

ts file:

func(){
     this.yourFlag = true;
}

If YourFlag is true the toggle will be on and vice versa.

Upvotes: 2

Related Questions