Angular 6 Subscription cleanup when clicking a button multiple times
Say I have a contact us button with a subscription to a contact us service, which returns an observable after firing the http request.
If a user clicks the button 10 times and sends 10 emails (desired), will 10 concurrent subscriptions be running? If so, what's the best practice for subscription cleanup in this scenario?
angular rxjs asked Nov 27 '18 at 21:50
RandomUs1rRandomUs1r
2,70711327
add a comment |
Say I have a contact us button with a subscription to a contact us service, which returns an observable after firing the http request.
If a user clicks the button 10 times and sends 10 emails (desired), will 10 concurrent subscriptions be running? If so, what's the best practice for subscription cleanup in this scenario?
angular rxjs asked Nov 27 '18 at 21:50
RandomUs1rRandomUs1r
2,70711327
It would be easier if you showed the code you are using since the answer very much depends on it.
– Ingo Bürk
Nov 27 '18 at 22:16
You can check if the current subscription is closed or not. reactivex.io/rxjs/class/es6/…
– wannadream
Nov 27 '18 at 22:31
add a comment |
Say I have a contact us button with a subscription to a contact us service, which returns an observable after firing the http request.
If a user clicks the button 10 times and sends 10 emails (desired), will 10 concurrent subscriptions be running? If so, what's the best practice for subscription cleanup in this scenario?
angular rxjs asked Nov 27 '18 at 21:50
RandomUs1rRandomUs1r
2,70711327
Say I have a contact us button with a subscription to a contact us service, which returns an observable after firing the http request.
If a user clicks the button 10 times and sends 10 emails (desired), will 10 concurrent subscriptions be running? If so, what's the best practice for subscription cleanup in this scenario?
angular rxjs angular rxjs asked Nov 27 '18 at 21:50
RandomUs1rRandomUs1r
2,70711327
asked Nov 27 '18 at 21:50
RandomUs1rRandomUs1r
2,70711327
edited Nov 27 '18 at 22:02
RandomUs1r
asked Nov 27 '18 at 21:50
RandomUs1rRandomUs1r
2,70711327
asked Nov 27 '18 at 21:50
RandomUs1rRandomUs1r
2,70711327
asked Nov 27 '18 at 21:50
RandomUs1rRandomUs1r
2,70711327
2,70711327
It would be easier if you showed the code you are using since the answer very much depends on it.
– Ingo Bürk
Nov 27 '18 at 22:16
You can check if the current subscription is closed or not. reactivex.io/rxjs/class/es6/…
– wannadream
Nov 27 '18 at 22:31
add a comment |
It would be easier if you showed the code you are using since the answer very much depends on it.
– Ingo Bürk
Nov 27 '18 at 22:16
You can check if the current subscription is closed or not. reactivex.io/rxjs/class/es6/…
– wannadream
Nov 27 '18 at 22:31
It would be easier if you showed the code you are using since the answer very much depends on it.
– Ingo Bürk
Nov 27 '18 at 22:16
It would be easier if you showed the code you are using since the answer very much depends on it.
– Ingo Bürk
Nov 27 '18 at 22:16
You can check if the current subscription is closed or not. reactivex.io/rxjs/class/es6/…
– wannadream
Nov 27 '18 at 22:31
You can check if the current subscription is closed or not. reactivex.io/rxjs/class/es6/…
– wannadream
Nov 27 '18 at 22:31
add a comment |
2 Answers
2
active
oldest
votes
You could avoid unsubscribing if you add a take(1) to the pipe when you subscribe - if you're subscribing multiple times
Alternatively, have a single subscription in the component with the button, which you initialize in ngOnInit() or in the constructor. Save a reference to the subscription in a private contactSubscription: SubscriptionLike property, and call contactSubscription && contactSubscription.unsubscribe in ngOnDestroy()
answered Nov 27 '18 at 22:45
DrenaiDrenai
3,52243254
take(1) is a very concise way to handle my scenario, thanks!
– RandomUs1r
Nov 27 '18 at 23:13
No prob, I found that out by asking questions here too! Thnks for the feedback 👍
– Drenai
Nov 28 '18 at 10:06
add a comment |
just save your subscription in a property and check if it exists, didn't subscribe, if not then subscribe
cacheSub: Subscription;
contactUs() {
if(!this.cacheSub) {
this.cacheSub = this.service.cacheSub.subscribe(....);
}
}
EDIT
if you want to subscribe each time and clean each subscription then, you can do
cacheSub: Subscription;
contactUs() {
this.cacheSub = this.service.cacheSub.subscribe(() => {
// some code here if you need it
this.cacheSub.unsubscribe();
});
}
or
contactUs() {
this.cacheSub && this.cacheSub.unsubscribe();
this.cacheSub = this.service.cacheSub.subscribe(() => {
// some code here if you need it
});
}
answered Nov 27 '18 at 21:58
Artyom AmiryanArtyom Amiryan
1,9621215
I must clarify... I want to be able to click the button 10 times and send 10 emails, my question is more when the user clicks the button again, what happens or what should i do to the 1st subscription.
– RandomUs1r
Nov 27 '18 at 22:02
@RandomUs1r I didn't get what you mean, how should you send emails when you will subscribe to observable ?, it will be better if you will share your code
– Artyom Amiryan
Nov 27 '18 at 22:04
I can post the code in a bit, however, I have a function that gets called by a UI button that then subscribes to the service that calls a web api method to send the email.
– RandomUs1r
Nov 27 '18 at 22:08
@RandomUs1r I have updated my answer, please check if it's what you need
– Artyom Amiryan
Nov 27 '18 at 22:13
the bottom two solutions look great, but I wound up using take(1), thanks!
– RandomUs1r
Nov 27 '18 at 23:14
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53508725%2fangular-6-subscription-cleanup-when-clicking-a-button-multiple-times%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
You could avoid unsubscribing if you add a take(1) to the pipe when you subscribe - if you're subscribing multiple times
Alternatively, have a single subscription in the component with the button, which you initialize in ngOnInit() or in the constructor. Save a reference to the subscription in a private contactSubscription: SubscriptionLike property, and call contactSubscription && contactSubscription.unsubscribe in ngOnDestroy()
answered Nov 27 '18 at 22:45
DrenaiDrenai
3,52243254
take(1) is a very concise way to handle my scenario, thanks!
– RandomUs1r
Nov 27 '18 at 23:13
No prob, I found that out by asking questions here too! Thnks for the feedback 👍
– Drenai
Nov 28 '18 at 10:06
add a comment |
You could avoid unsubscribing if you add a take(1) to the pipe when you subscribe - if you're subscribing multiple times
Alternatively, have a single subscription in the component with the button, which you initialize in ngOnInit() or in the constructor. Save a reference to the subscription in a private contactSubscription: SubscriptionLike property, and call contactSubscription && contactSubscription.unsubscribe in ngOnDestroy()
answered Nov 27 '18 at 22:45
DrenaiDrenai
3,52243254
take(1) is a very concise way to handle my scenario, thanks!
– RandomUs1r
Nov 27 '18 at 23:13
No prob, I found that out by asking questions here too! Thnks for the feedback 👍
– Drenai
Nov 28 '18 at 10:06
add a comment |
You could avoid unsubscribing if you add a take(1) to the pipe when you subscribe - if you're subscribing multiple times
Alternatively, have a single subscription in the component with the button, which you initialize in ngOnInit() or in the constructor. Save a reference to the subscription in a private contactSubscription: SubscriptionLike property, and call contactSubscription && contactSubscription.unsubscribe in ngOnDestroy()
answered Nov 27 '18 at 22:45
DrenaiDrenai
3,52243254
You could avoid unsubscribing if you add a take(1) to the pipe when you subscribe - if you're subscribing multiple times
Alternatively, have a single subscription in the component with the button, which you initialize in ngOnInit() or in the constructor. Save a reference to the subscription in a private contactSubscription: SubscriptionLike property, and call contactSubscription && contactSubscription.unsubscribe in ngOnDestroy()
answered Nov 27 '18 at 22:45
DrenaiDrenai
3,52243254
answered Nov 27 '18 at 22:45
DrenaiDrenai
3,52243254
answered Nov 27 '18 at 22:45
DrenaiDrenai
3,52243254
answered Nov 27 '18 at 22:45
DrenaiDrenai
3,52243254
3,52243254
take(1) is a very concise way to handle my scenario, thanks!
– RandomUs1r
Nov 27 '18 at 23:13
No prob, I found that out by asking questions here too! Thnks for the feedback 👍
– Drenai
Nov 28 '18 at 10:06
add a comment |
take(1) is a very concise way to handle my scenario, thanks!
– RandomUs1r
Nov 27 '18 at 23:13
No prob, I found that out by asking questions here too! Thnks for the feedback 👍
– Drenai
Nov 28 '18 at 10:06
take(1) is a very concise way to handle my scenario, thanks!
– RandomUs1r
Nov 27 '18 at 23:13
take(1) is a very concise way to handle my scenario, thanks!
– RandomUs1r
Nov 27 '18 at 23:13
No prob, I found that out by asking questions here too! Thnks for the feedback 👍
– Drenai
Nov 28 '18 at 10:06
No prob, I found that out by asking questions here too! Thnks for the feedback 👍
– Drenai
Nov 28 '18 at 10:06
add a comment |
just save your subscription in a property and check if it exists, didn't subscribe, if not then subscribe
cacheSub: Subscription;
contactUs() {
if(!this.cacheSub) {
this.cacheSub = this.service.cacheSub.subscribe(....);
}
}
EDIT
if you want to subscribe each time and clean each subscription then, you can do
cacheSub: Subscription;
contactUs() {
this.cacheSub = this.service.cacheSub.subscribe(() => {
// some code here if you need it
this.cacheSub.unsubscribe();
});
}
or
contactUs() {
this.cacheSub && this.cacheSub.unsubscribe();
this.cacheSub = this.service.cacheSub.subscribe(() => {
// some code here if you need it
});
}
answered Nov 27 '18 at 21:58
Artyom AmiryanArtyom Amiryan
1,9621215
I must clarify... I want to be able to click the button 10 times and send 10 emails, my question is more when the user clicks the button again, what happens or what should i do to the 1st subscription.
– RandomUs1r
Nov 27 '18 at 22:02
@RandomUs1r I didn't get what you mean, how should you send emails when you will subscribe to observable ?, it will be better if you will share your code
– Artyom Amiryan
Nov 27 '18 at 22:04
I can post the code in a bit, however, I have a function that gets called by a UI button that then subscribes to the service that calls a web api method to send the email.
– RandomUs1r
Nov 27 '18 at 22:08
@RandomUs1r I have updated my answer, please check if it's what you need
– Artyom Amiryan
Nov 27 '18 at 22:13
the bottom two solutions look great, but I wound up using take(1), thanks!
– RandomUs1r
Nov 27 '18 at 23:14
add a comment |
just save your subscription in a property and check if it exists, didn't subscribe, if not then subscribe
cacheSub: Subscription;
contactUs() {
if(!this.cacheSub) {
this.cacheSub = this.service.cacheSub.subscribe(....);
}
}
EDIT
if you want to subscribe each time and clean each subscription then, you can do
cacheSub: Subscription;
contactUs() {
this.cacheSub = this.service.cacheSub.subscribe(() => {
// some code here if you need it
this.cacheSub.unsubscribe();
});
}
or
contactUs() {
this.cacheSub && this.cacheSub.unsubscribe();
this.cacheSub = this.service.cacheSub.subscribe(() => {
// some code here if you need it
});
}
answered Nov 27 '18 at 21:58
Artyom AmiryanArtyom Amiryan
1,9621215
I must clarify... I want to be able to click the button 10 times and send 10 emails, my question is more when the user clicks the button again, what happens or what should i do to the 1st subscription.
– RandomUs1r
Nov 27 '18 at 22:02
@RandomUs1r I didn't get what you mean, how should you send emails when you will subscribe to observable ?, it will be better if you will share your code
– Artyom Amiryan
Nov 27 '18 at 22:04
I can post the code in a bit, however, I have a function that gets called by a UI button that then subscribes to the service that calls a web api method to send the email.
– RandomUs1r
Nov 27 '18 at 22:08
@RandomUs1r I have updated my answer, please check if it's what you need
– Artyom Amiryan
Nov 27 '18 at 22:13
the bottom two solutions look great, but I wound up using take(1), thanks!
– RandomUs1r
Nov 27 '18 at 23:14
add a comment |
just save your subscription in a property and check if it exists, didn't subscribe, if not then subscribe
cacheSub: Subscription;
contactUs() {
if(!this.cacheSub) {
this.cacheSub = this.service.cacheSub.subscribe(....);
}
}
EDIT
if you want to subscribe each time and clean each subscription then, you can do
cacheSub: Subscription;
contactUs() {
this.cacheSub = this.service.cacheSub.subscribe(() => {
// some code here if you need it
this.cacheSub.unsubscribe();
});
}
or
contactUs() {
this.cacheSub && this.cacheSub.unsubscribe();
this.cacheSub = this.service.cacheSub.subscribe(() => {
// some code here if you need it
});
}
answered Nov 27 '18 at 21:58
Artyom AmiryanArtyom Amiryan
1,9621215
just save your subscription in a property and check if it exists, didn't subscribe, if not then subscribe
cacheSub: Subscription;
contactUs() {
if(!this.cacheSub) {
this.cacheSub = this.service.cacheSub.subscribe(....);
}
}
EDIT
if you want to subscribe each time and clean each subscription then, you can do
cacheSub: Subscription;
contactUs() {
this.cacheSub = this.service.cacheSub.subscribe(() => {
// some code here if you need it
this.cacheSub.unsubscribe();
});
}
or
contactUs() {
this.cacheSub && this.cacheSub.unsubscribe();
this.cacheSub = this.service.cacheSub.subscribe(() => {
// some code here if you need it
});
}
answered Nov 27 '18 at 21:58
Artyom AmiryanArtyom Amiryan
1,9621215
edited Nov 27 '18 at 22:13
answered Nov 27 '18 at 21:58
Artyom AmiryanArtyom Amiryan
1,9621215
answered Nov 27 '18 at 21:58
Artyom AmiryanArtyom Amiryan
1,9621215
answered Nov 27 '18 at 21:58
Artyom AmiryanArtyom Amiryan
1,9621215
1,9621215
I must clarify... I want to be able to click the button 10 times and send 10 emails, my question is more when the user clicks the button again, what happens or what should i do to the 1st subscription.
– RandomUs1r
Nov 27 '18 at 22:02
@RandomUs1r I didn't get what you mean, how should you send emails when you will subscribe to observable ?, it will be better if you will share your code
– Artyom Amiryan
Nov 27 '18 at 22:04
I can post the code in a bit, however, I have a function that gets called by a UI button that then subscribes to the service that calls a web api method to send the email.
– RandomUs1r
Nov 27 '18 at 22:08
@RandomUs1r I have updated my answer, please check if it's what you need
– Artyom Amiryan
Nov 27 '18 at 22:13
the bottom two solutions look great, but I wound up using take(1), thanks!
– RandomUs1r
Nov 27 '18 at 23:14
add a comment |
I must clarify... I want to be able to click the button 10 times and send 10 emails, my question is more when the user clicks the button again, what happens or what should i do to the 1st subscription.
– RandomUs1r
Nov 27 '18 at 22:02
@RandomUs1r I didn't get what you mean, how should you send emails when you will subscribe to observable ?, it will be better if you will share your code
– Artyom Amiryan
Nov 27 '18 at 22:04
I can post the code in a bit, however, I have a function that gets called by a UI button that then subscribes to the service that calls a web api method to send the email.
– RandomUs1r
Nov 27 '18 at 22:08
@RandomUs1r I have updated my answer, please check if it's what you need
– Artyom Amiryan
Nov 27 '18 at 22:13
the bottom two solutions look great, but I wound up using take(1), thanks!
– RandomUs1r
Nov 27 '18 at 23:14
I must clarify... I want to be able to click the button 10 times and send 10 emails, my question is more when the user clicks the button again, what happens or what should i do to the 1st subscription.
– RandomUs1r
Nov 27 '18 at 22:02
I must clarify... I want to be able to click the button 10 times and send 10 emails, my question is more when the user clicks the button again, what happens or what should i do to the 1st subscription.
– RandomUs1r
Nov 27 '18 at 22:02
@RandomUs1r I didn't get what you mean, how should you send emails when you will subscribe to observable ?, it will be better if you will share your code
– Artyom Amiryan
Nov 27 '18 at 22:04
@RandomUs1r I didn't get what you mean, how should you send emails when you will subscribe to observable ?, it will be better if you will share your code
– Artyom Amiryan
Nov 27 '18 at 22:04
I can post the code in a bit, however, I have a function that gets called by a UI button that then subscribes to the service that calls a web api method to send the email.
– RandomUs1r
Nov 27 '18 at 22:08
I can post the code in a bit, however, I have a function that gets called by a UI button that then subscribes to the service that calls a web api method to send the email.
– RandomUs1r
Nov 27 '18 at 22:08
@RandomUs1r I have updated my answer, please check if it's what you need
– Artyom Amiryan
Nov 27 '18 at 22:13
@RandomUs1r I have updated my answer, please check if it's what you need
– Artyom Amiryan
Nov 27 '18 at 22:13
the bottom two solutions look great, but I wound up using take(1), thanks!
– RandomUs1r
Nov 27 '18 at 23:14
the bottom two solutions look great, but I wound up using take(1), thanks!
– RandomUs1r
Nov 27 '18 at 23:14
add a comment |
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53508725%2fangular-6-subscription-cleanup-when-clicking-a-button-multiple-times%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
It would be easier if you showed the code you are using since the answer very much depends on it.
– Ingo Bürk
Nov 27 '18 at 22:16
You can check if the current subscription is closed or not. reactivex.io/rxjs/class/es6/…
– wannadream
Nov 27 '18 at 22:31