dynamically set status

[troddick]

I am showing a Confirm custom modal when the switch is clicked. I want to wait to actually toggle the switch until I get a response from the Confirm modal. As a work-around to not being able to control the switch changing whether they say Yes or No in the confirm, I am trying to dynamically set the switch back to false if they say No in the Confirm. Setting the status boolean dynamically is not affecting the switch. It is assigning the value, but not switching it back to false/no in the html. Template: <switch [status]="switchStatus" [onText]="'Yes'" [offText]="'No'" [onColor]="'sky-blue'" [offColor]="'default'" [size]="'normal'" (statusChange)="onFlagChange($event)"></switch>

Component: In ngOnInit(), setting this.switchStatus = this.fullProject.ready_flag == 1 ? true : false; This works perfectly when first showing the page.

In onFlagChange function,

public onFlagChange(e) { this.flaggingBool = e; if (e){ //add ready flag this._dialogService.setMessage("Are you sure this project is ready to publish on the SiGL Mapper?"); this.areYouSure.showSureModal(); <---shows the confirm modal } else { //remove ready flag } this.switchStatus = !e; <-- Keep the switch what it was until they respond to the showSureModal }

// response from confirm modal (either want to flag/unflag or cancel) public AreYouSureDialogResponse(val:boolean){ //if they clicked Yes if (val) { this.switchStatus = true; <--- now make the switch 'Yes' //flag or unflag project (this.flaggingBool) // update project with flagged state {....} } else { //they cancelled this.switchStatus = false; <--- make switch 'No' } } It looks like the actual value is sticking, but the switch is not changing accordingly. Is there a way to dynamically flip the switch?

Thanks

[ovsleep]

You're missing the two-way binding for the status property: <switch [(status)]="switchStatus" [onText]="'Yes'" [offText]="'No'" [onColor]="'sky-blue'" [offColor]="'default'" [size]="'normal'" (statusChange)="onFlagChange($event)">

Mind the () added in the status property. With that, you should be able to set the switchStatus to true/false and the switch would react. Anyway I found out that if you try to set the status on the statusChange event (onFlagChange in your case) it wont work, I think there's an issue with when the event gets called and the change is actually done. But if you set the value on your dialog response event it should work fine.

[troddick]

Great! That works. Thanks