beforeChange event

[myaesubi]

Hi there,
Thanks a lot for the component.
I wonder if there is opportunity to add beforeChange event to this component. I am hooking up a dialog box when a toggle happens, however the current exposed events manages after the fact events.

I would try to control whether before toggle happen I can add conditions.

Thank you,
Mohammad

[lslavuj]

It would be good to add this option. I am trying to do event.preventDefault() on change event (change)="onChange($event) to prevent the toggle button switching but it doesnt work, toggle button is always swithcing when clicked.

Can you give us some info, when can we expect this option?
BR,
Luka

[cmckni3]

I don't have a lot of time at the moment.

PRs are welcome

[rolandow]

Maybe this workaround is usefull for others. In my case, I had a "status" property which could be 0 for off, and > 0 for on (but different states). I solved this by adding a PopOver, where one could choose from different "on" states when turning the switch to ON.

Now, when one would "cancel" this operation, I would set the state property back to 0. Although I used the [checked] binding, the control still wouldn't go back in unchecked state.

By adding a template reference, I was able to force the switch back to "off".

So I had this in my template:

<ui-switch [ngbPopover]="popContent" [popoverTitle]="popTitle" #p="ngbPopover" triggers="manual" [autoClose]="false"
           [checked]="batControlItem.status !== 0" size="small" (change)="onToggleButton($event, batControlItem)"
           [disabled]="toggleDisabled(batControlItem)" #uiSwitchComponent>
</ui-switch>

<ng-template #popContent let-list="batControlStatusList">
  <ul class="list-group popover-list-group">
    <li class="list-group-item" [ngClass]="{ 'active': selectedStatus === i+1}" *ngFor="let item of batControlStatusList; let i = index;" (click)="chooseStatus(i+1)">{{ item|translate }}</li>
  </ul>
  <button class="btn btn-outline-primary" style="width: 100%; margin-top: 10px;" (click)="updateStatusFromPopover()">Select</button>
</ng-template>

<ng-template #popTitle>
  <div class="d-flex justify-content-between">
    <div>Choose status</div>
    <div><i class="fa fa-times" (click)="cancelStatusFromPopover()"></i></div>
  </div>
</ng-template>

In my typescript code:

  onToggleButton(newStatus, batControl: BatControl) {
    // Check if more isOnline statusses are possible
    if (batControl.getStatusList().length > 2 && newStatus === true) {
      this.selectedStatus = 0;
      this.batControlStatusList = this.getStatusList();
      this.popover.open();
    }

    if (newStatus === false || batControl.getStatusList().length <= 2) {
      this._batControlItem.status = +newStatus;
      this.batControlStorage.saveBatControl(this._batControlItem)
        .pipe(take(1))
        .subscribe(bc => {
          this._batControlItem = bc;
        });
    }
  }

  cancelStatusFromPopover() {
    this.popover.close();
    this.batControlItem.status = 0;
    this.uiSwitchComponent.checked = false;
  }

[kameelyan]

Opened a pull request for this issue + adding a loading state.

[cmckni3]

Available in master.

Will report back when published to npm. Probably some time this afternoon/evening

[cmckni3]

8.2.0 published to npm