Using toggle Ionic 2

Ionic Framework ionic-v3
1

I’m using in my project one toggle button like this:

ion-toggle [(ngModel)]=“toggleStatus” pulsado checked=“false” (ionChange)=“Cambios_Toggle();”>

When I change status I call to my function “Change_Toggle()”. That work fine but I have a problem because when I access to my page I need to check if my button must be active and in this case enabled the button to shown in the interface so I do that like this:

this.toggleStatus=true;

The problem is that when I change the status, my function “Change_Toggle()” is called and I don’t need to call only change status for show in the interface. Somebody know how can I do that? Thanks in advance.

Best regards.

2

hi @Jose_Ionic,

Not able to recognize you problem here, would you like to share some snippet code??, so i can give you the solution for that.

3

Of course! In my .html I have one toggle button like this:

<ion-toggle [(ngModel)]="toggleStatus" pulsado checked="false" (ionChange)="Change_Toggle();"></ion-toggle>

My .ts is like this:

import {Component} from "@angular/core";
......

@Component({
  templateUrl: 'build/pages/mypage/mypage.html'
})
export class Myclass {
    
    items : any;
    
  constructor(private navController: NavController, private navParams: NavParams, private http: Http, private alertCtrl: AlertController) {
    this.parameter1 = navParams.get('param1');
    this.http=http;
    
    this.http.get("http://192.168.1.100:8080/GetDataClima"+'_'+this.parameter1)
        .map(res => res.json())
        .subscribe(data => {
            
            if((data.value_climaencendido == '1')){
                   this.toggleStatus=true;
            }           
        }, error => {
            console.log(JSON.stringify(error.json()));
        });
    }

Change_Toggle() {
      if(this.toggleStatus == true){
              this.http.post(...)
              .......
       }
       else{
               this.http.post(...)
               .......
       }
}

When I change status in the user interface automatically is called my function “ChangeToggle()” and send data depending if this.toggleStatus is true o false. That is work fine, but when I access to my page, in my constructor I receive data from my server and if “data.value_climaencendido == ‘1’” I need to show toggle button = true in my interface so I use “this.toggleStatus=true;” but this instruction call to my function “ChangeToggle()” so connect with the server again and I don’t that, only want change status in my interface but not access to the function “ChangeToggle()” in the constructor.
I do not know if I’ve explained. Hope so.

Thanks in advance.

4

Dear @Jose_Ionic
try use this ngOnchange

see the link if you still need a help pleasure to help you

5 
items : any;
init = false;

constructor(...) {
this.parameter1 = navParams.get('param1');
this.http=http;

this.http.get("http://192.168.1.100:8080/GetDataClima"+'_'+this.parameter1)
    .map(res => res.json())
    .subscribe(data => {            
        if((data.value_climaencendido == '1')){
               this.toggleStatus=true;
        }           
        this.init = true;
    }, error => {
        console.log(JSON.stringify(error.json()));
    });
}

Change_Toggle() {
  if(this.toggleStatus == true){
          this.http.post(...)
          .......
   }
   else{
           this.http.post(...)
   }
}

HTML Would be like, after initialize the toggleStatus, render the ion-toggle, or subsequently you can check this init.true in change_toggle() method

<ion-toggle *ngIf="init" [(ngModel)]="toggleStatus" pulsado checked="false" (ionChange)="Change_Toggle();"></ion-toggle>
1 Like
6

Thanks for reply me, but there is a problem because in the program execution, first execute “this.init = true;” and after that call to my function “Cambios_Toggle()” so… it’s the same problem :S

7

Thanks for reply me Thavarajan, Is it possible one example please? Thanks in advance!

8

see this plunker link

you can also use the setter and getter functions