Unable to use preventdefault/Stoppropagation to restrict the switch in particular condtion

[priteshbonde]

html:-

<bSwitch [(ngModel)]="club.plans[0].IsFeatured"
(onChangeState)="updateclubs($event, club)">

Component Code:-

updateclubs(event, club) {

    if (club.Isactive) {
      event.preventDefault();
    }

i need to prevent the switch incase when club is inactive. StopPropagation method is also not available.

[JulioWar]

Hello, @priteshbonde.

If you are trying to disable, it's better to use the property of switch-disabled or switch-readonly, so you can do this:

<bSwitch [(ngModel)]="club.plans[0].IsFeatured"
(onChangeState)="updateclubs($event, club)" [switch-disabled]="club.Isactive">

[priteshbonde]

I cannot disable it. there are multiple switches in the grid I need to show a message when more than 5 switches are in ON state. and also prevent the action of the switch.

[JulioWar]

Hi, @priteshbonde.

Had not thought of that. I'm gonna search for the best solution and see if exist a way to do this. For now, maybe a quick solution can be this:

HTML:

<bSwitch *ngFor="let plan of club.plans"
                    [(ngModel)]="plan.isFeatured"
                    (click)="onClick(club.Isactive && !plan.isFeatured)"
                    [switch-disabled]="club.Isactive && !plan.isFeatured"
                    (onChangeState)="checkPlans($event,club)"  ></bSwitch>

Component:

  checkPlans(event,club) {

    let activePlans = club.plans.filter((item) => {
        return item.isFeatured;
    }).length;

    club.Isactive = (activePlans == 5);

}

onClick(flag) {
    if(flag) {
        // Do something
    }
}

If you just want to show a div or something like that, you just need to use the club.Isactive

<div class="alert alert-danger" [hidden]="club.Isactive"></div>

or

<div class="alert alert-danger" *ngIf="!club.Isactive"></div>

let me know if work for you this temporary solution.

I'm going to take a time to research this weekend.

[priteshbonde]

Great
Disabling solved my issue for the time thanks. 👍