CODEWITHSUNDEEP
nativescriptangular2-nativescript
Niyaz
Niyaz

Reputation: 2893

Nativescript Switch prevent change event firing on initial binding

Hi my template is something like the below

<ListView [items]="modules">
    <template let-item="item" >
        <StackLayout orientation="vertical">
                <Switch (checkedChange)="onSwitchModule(item.id,$event)" [checked]="item.active"></Switch>
        </StackLayout>
    </template>
</ListView>

My controller is 

ngOnInit() {
    this._moduleService.getUserModules()
        .subscribe(
            response=>{
              this.modules = response.data;
            }
        )

}

onSwitchModule(itemId) {
   console.log(itemID); //Gets called on initial true binding on switch checked
}

The onSwitchModule get called everytime the page loads with item.active is true on any item, how to handle this ?

NOTE: Beginner in Nativescript

Upvotes: 5

Views: 1568

Answers (2)

Nicu Surdu
Nicu Surdu

Reputation: 8321

What I did to overcome this is I watch for tap events instead of checkedChange:

<Switch (tap)="switchClicked" [checked]="item.active"></Switch>

and in the callback, you can get the current item from bindingContext:

function switchClicked(args) {
  const item = args.object.bindingContext.item;
}

Upvotes: 4

settheline
settheline

Reputation: 3383

I ran into a similar issue: loading up settings data from an API, and having the checked event fire for the value I'd set from the api -- not desirable in my case. I didn't see a great way to prevent events from firing on the initial binding, so I decided to simply ignore events until I knew they were legit events from the user actually using the switch.

I did that by using a property switchReady to keep track of when you want to start recognizing change events. This pattern also keeps the toggle disabled until you're ready to start accepting changes. This makes use of Switch's isEnabled property, see docs here.

Markup

<Switch [checked]="currentSettings.pushTurnedOn" [isEnabled]="switchReady" (checkedChange)="onPushSettingChange($event)" row="0" col="1"></Switch>

Component

export class SettingsComponent implements OnInit {
  currentSettings: Settings = new Settings(false)    
  switchReady: boolean = false

  ngOnInit() {
    this.getCurrentSettings()
  }

  public onPushSettingChange(args) {
    let settingSwitch = <Switch>args.object

    if (settingSwitch.isEnabled) {
      // do something with the event/change    
    } else {
      // we aren't ready to accept changes, do nothing with this change          
      return
    }
  }

  getCurrentSettings() {
    this.settingsService.loadCurrentSettings().subscribe(
      () => {
        this.currentSettings = this.settingsService.currentSettings
        // we've applied our api change via data binding, it's okay to accept switch events now
        this.switchReady = true
      },
      err => alert('There was a problem retrieving your settings.')
    )
  }
}

Upvotes: 0

Related Questions