Material Design Slide Toggle does not have event.StopPropagation, what should I use?

Question

The Slide Toggle in Material Design does not have a stopPropagation event, because the "MdSlideToggle.prototype._onChangeEvent" already calls stopPropagation. What should I be using, instead?

<md-slide-toggle (change)="changeToggle($event, activityType.isActive)" checked="activityType.isActive" value="activityType.activityTypeId" mdTooltip="{{!!activityType.isActive ? 'Active' : 'Inactive'}}" mdTooltipPosition="left"></md-slide-toggle>


public changeToggle(event: MdSlideToggleChange, originalValue){
    if (this.hasChange && event.checked !== originalValue){
        event.stopPropagation();
        //Results in error: [ts] Property 'stopPropagation' does not exist on type 'MdSlideToggleChange'.
    } else {
        this.hasChange = !this.hasChange;
    }
}

I can use a regular event, but that gets an exception saying "event.stopPropagation is not a function".

For the moment, I'm changing that line to:

event.source.checked = !event.checked;

The same is true of event.preventDefault. I need to require the user to save the change, before changing another value on the page, because "business requirements".

Is just changing the value of "checked" back to what it was, the right thing to do? Is there a better way to do this?

Answer 1

"I need to require the user to save the change, before changing another value on the page"

I know this is off topic, but this pertains to your "business requirements" If you are saying that the user has to press a separate button in order to confirm the value of the mat-slide-toggle then you should not be using a mat-slide-toggle. You should be using a checkbox.

mat-slide-toggles are good for 1-off actions, turning a light on or off, not asking if you want the light to be on or off. Its an action, not a question.

Checkboxes are better suited for questions.