mat-slide-toggle shouldn't change it's state when I click cancel in confirmation window

When I checked the slide toggle it should work as expected. But when I try to uncheck it there is a confirmation window asking if you are sure. When I click cancel in that confirmation window, still the toggle changes to unchecked, which shouldn't happen. It should stay in the same state.

Here is my Html and TS Code

// html

<mat-slide-toggle 

   (change)="change($event)" [checked]="isChecked()" >

     To-pay

   </mat-slide-toggle>

TS code:

// ts

    change(e) {

       if(this.checked) {

           if(confirm("Are you sure")) {

              console.log("toggle")

           }

           else {

              e.stopPropagation();

                console.log("toggle should not change if I click the cancel button")

           }

        }

    }

when the confirmation window comes while trying to uncheck the toggle button and I click the cancel option there, nothing should happen to the toggle. stopPropagation() is also not working.

Edit1 :I tried doing return false in else statement. didn't worked. Even tried to change the e.checked = false. It just changed the event object value but didn't prevent the toggle from slidding

edited Jan 2 at 11:28

asked Jan 2 at 11:05

UdG

989

What about a "return false" instead of the stopPropagation ?

– Leogiciel
Jan 2 at 11:09

I tried it. didn't worked

– UdG
Jan 2 at 11:12

Is "this.checked" true when you pass in this method at uncheck ? Maybe the problem is you have to "else" on the first if and not the second one...

– Leogiciel
Jan 2 at 11:19

ya this.checked is true when i try to uncheck. if this.checked is false , it shouldn't enter the code of showing confirm window

– UdG
Jan 2 at 11:21

What version of Angular do you use ?

– Leogiciel
Jan 2 at 11:27

|
show 2 more comments

Here is my Html and TS Code

// html

<mat-slide-toggle 

   (change)="change($event)" [checked]="isChecked()" >

     To-pay

   </mat-slide-toggle>

TS code:

// ts

    change(e) {

       if(this.checked) {

           if(confirm("Are you sure")) {

              console.log("toggle")

           }

           else {

              e.stopPropagation();

                console.log("toggle should not change if I click the cancel button")

           }

        }

    }

when the confirmation window comes while trying to uncheck the toggle button and I click the cancel option there, nothing should happen to the toggle. stopPropagation() is also not working.

Edit1 :I tried doing return false in else statement. didn't worked. Even tried to change the e.checked = false. It just changed the event object value but didn't prevent the toggle from slidding

edited Jan 2 at 11:28

asked Jan 2 at 11:05

UdG

989

What about a "return false" instead of the stopPropagation ?

– Leogiciel
Jan 2 at 11:09

I tried it. didn't worked

– UdG
Jan 2 at 11:12

Is "this.checked" true when you pass in this method at uncheck ? Maybe the problem is you have to "else" on the first if and not the second one...

– Leogiciel
Jan 2 at 11:19

ya this.checked is true when i try to uncheck. if this.checked is false , it shouldn't enter the code of showing confirm window

– UdG
Jan 2 at 11:21

What version of Angular do you use ?

– Leogiciel
Jan 2 at 11:27

|
show 2 more comments

Here is my Html and TS Code

// html

<mat-slide-toggle 

   (change)="change($event)" [checked]="isChecked()" >

     To-pay

   </mat-slide-toggle>

TS code:

// ts

    change(e) {

       if(this.checked) {

           if(confirm("Are you sure")) {

              console.log("toggle")

           }

           else {

              e.stopPropagation();

                console.log("toggle should not change if I click the cancel button")

           }

        }

    }

when the confirmation window comes while trying to uncheck the toggle button and I click the cancel option there, nothing should happen to the toggle. stopPropagation() is also not working.

Edit1 :I tried doing return false in else statement. didn't worked. Even tried to change the e.checked = false. It just changed the event object value but didn't prevent the toggle from slidding

edited Jan 2 at 11:28

asked Jan 2 at 11:05

UdG

989

Here is my Html and TS Code

// html

<mat-slide-toggle 

   (change)="change($event)" [checked]="isChecked()" >

     To-pay

   </mat-slide-toggle>

TS code:

// ts

    change(e) {

       if(this.checked) {

           if(confirm("Are you sure")) {

              console.log("toggle")

           }

           else {

              e.stopPropagation();

                console.log("toggle should not change if I click the cancel button")

           }

        }

    }

when the confirmation window comes while trying to uncheck the toggle button and I click the cancel option there, nothing should happen to the toggle. stopPropagation() is also not working.

Edit1 :I tried doing return false in else statement. didn't worked. Even tried to change the e.checked = false. It just changed the event object value but didn't prevent the toggle from slidding

angular angular-material angular5

edited Jan 2 at 11:28

asked Jan 2 at 11:05

UdG

989

edited Jan 2 at 11:28

asked Jan 2 at 11:05

UdG

989

edited Jan 2 at 11:28

asked Jan 2 at 11:05

UdG

989

asked Jan 2 at 11:05

UdG

989

asked Jan 2 at 11:05

UdG

989

What about a "return false" instead of the stopPropagation ?

– Leogiciel
Jan 2 at 11:09

I tried it. didn't worked

– UdG
Jan 2 at 11:12

Is "this.checked" true when you pass in this method at uncheck ? Maybe the problem is you have to "else" on the first if and not the second one...

– Leogiciel
Jan 2 at 11:19

ya this.checked is true when i try to uncheck. if this.checked is false , it shouldn't enter the code of showing confirm window

– UdG
Jan 2 at 11:21

What version of Angular do you use ?

– Leogiciel
Jan 2 at 11:27

|
show 2 more comments

What about a "return false" instead of the stopPropagation ?

– Leogiciel
Jan 2 at 11:09

I tried it. didn't worked

– UdG
Jan 2 at 11:12

Is "this.checked" true when you pass in this method at uncheck ? Maybe the problem is you have to "else" on the first if and not the second one...

– Leogiciel
Jan 2 at 11:19

ya this.checked is true when i try to uncheck. if this.checked is false , it shouldn't enter the code of showing confirm window

– UdG
Jan 2 at 11:21

What version of Angular do you use ?

– Leogiciel
Jan 2 at 11:27

What about a "return false" instead of the stopPropagation ?

– Leogiciel
Jan 2 at 11:09

I tried it. didn't worked

– UdG
Jan 2 at 11:12

Is "this.checked" true when you pass in this method at uncheck ? Maybe the problem is you have to "else" on the first if and not the second one...

– Leogiciel
Jan 2 at 11:19

ya this.checked is true when i try to uncheck. if this.checked is false , it shouldn't enter the code of showing confirm window

– UdG
Jan 2 at 11:21

What version of Angular do you use ?

– Leogiciel
Jan 2 at 11:27

|
show 2 more comments

2 Answers
2

active

oldest

votes

Unfortunately you cannot use stopPropagation with mat-slide-toggle, you will need to programmatically set the checked value back to true on the event in your else condition.

else {

        e.source.checked = true;

        console.log("toggle should not change if I click the cancel button")

      }

Stackblitz

https://stackblitz.com/edit/angular-79yf7m?embed=1&file=app/slide-toggle-overview-example.ts

answered Jan 2 at 17:34

Marshal

3,2722521

it Worked. Thanks. "source" was what missing in my trials.

– UdG
Jan 3 at 5:52

add a comment |

I think the matter is the (change)="eventHandler()" will fire AFTER the value change, while the (ngModelChange)="eventHandler()" will fire BEFORE the value change

answered Jan 2 at 11:33

Leogiciel

15810

ngModelChange is not working in my usecase

– UdG
Jan 2 at 11:37

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54005182%2fmat-slide-toggle-shouldnt-change-its-state-when-i-click-cancel-in-confirmation%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

Unfortunately you cannot use stopPropagation with mat-slide-toggle, you will need to programmatically set the checked value back to true on the event in your else condition.

else {

        e.source.checked = true;

        console.log("toggle should not change if I click the cancel button")

      }

Stackblitz

https://stackblitz.com/edit/angular-79yf7m?embed=1&file=app/slide-toggle-overview-example.ts

answered Jan 2 at 17:34

Marshal

3,2722521

it Worked. Thanks. "source" was what missing in my trials.

– UdG
Jan 3 at 5:52

add a comment |

Unfortunately you cannot use stopPropagation with mat-slide-toggle, you will need to programmatically set the checked value back to true on the event in your else condition.

else {

        e.source.checked = true;

        console.log("toggle should not change if I click the cancel button")

      }

Stackblitz

https://stackblitz.com/edit/angular-79yf7m?embed=1&file=app/slide-toggle-overview-example.ts

answered Jan 2 at 17:34

Marshal

3,2722521

it Worked. Thanks. "source" was what missing in my trials.

– UdG
Jan 3 at 5:52

add a comment |

Unfortunately you cannot use stopPropagation with mat-slide-toggle, you will need to programmatically set the checked value back to true on the event in your else condition.

else {

        e.source.checked = true;

        console.log("toggle should not change if I click the cancel button")

      }

Stackblitz

https://stackblitz.com/edit/angular-79yf7m?embed=1&file=app/slide-toggle-overview-example.ts

answered Jan 2 at 17:34

Marshal

3,2722521

Unfortunately you cannot use stopPropagation with mat-slide-toggle, you will need to programmatically set the checked value back to true on the event in your else condition.

else {

        e.source.checked = true;

        console.log("toggle should not change if I click the cancel button")

      }

Stackblitz

https://stackblitz.com/edit/angular-79yf7m?embed=1&file=app/slide-toggle-overview-example.ts

answered Jan 2 at 17:34

Marshal

3,2722521

answered Jan 2 at 17:34

Marshal

3,2722521

answered Jan 2 at 17:34

Marshal

3,2722521

answered Jan 2 at 17:34

Marshal

3,2722521

it Worked. Thanks. "source" was what missing in my trials.

– UdG
Jan 3 at 5:52

add a comment |

it Worked. Thanks. "source" was what missing in my trials.

– UdG
Jan 3 at 5:52

it Worked. Thanks. "source" was what missing in my trials.

– UdG
Jan 3 at 5:52

add a comment |

I think the matter is the (change)="eventHandler()" will fire AFTER the value change, while the (ngModelChange)="eventHandler()" will fire BEFORE the value change

answered Jan 2 at 11:33

Leogiciel

15810

ngModelChange is not working in my usecase

– UdG
Jan 2 at 11:37

add a comment |

I think the matter is the (change)="eventHandler()" will fire AFTER the value change, while the (ngModelChange)="eventHandler()" will fire BEFORE the value change

answered Jan 2 at 11:33

Leogiciel

15810

ngModelChange is not working in my usecase

– UdG
Jan 2 at 11:37

add a comment |

I think the matter is the (change)="eventHandler()" will fire AFTER the value change, while the (ngModelChange)="eventHandler()" will fire BEFORE the value change

answered Jan 2 at 11:33

Leogiciel

15810

I think the matter is the (change)="eventHandler()" will fire AFTER the value change, while the (ngModelChange)="eventHandler()" will fire BEFORE the value change

answered Jan 2 at 11:33

Leogiciel

15810

answered Jan 2 at 11:33

Leogiciel

15810

answered Jan 2 at 11:33

Leogiciel

15810

answered Jan 2 at 11:33

Leogiciel

15810

ngModelChange is not working in my usecase

– UdG
Jan 2 at 11:37

add a comment |

ngModelChange is not working in my usecase

– UdG
Jan 2 at 11:37

ngModelChange is not working in my usecase

– UdG
Jan 2 at 11:37

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu