How to share Global count variable between two modules in Angular?
In My application I have different lazy loaded module and in each module I need a Count which would be only one for all module
e.g if i increment count in shopping module so i should get this incremented count in payment module
how can I achieve ?
angular redux module
asked Nov 21 '18 at 13:59
Vaibhav PhutaneVaibhav Phutane
64
add a comment |
In My application I have different lazy loaded module and in each module I need a Count which would be only one for all module
e.g if i increment count in shopping module so i should get this incremented count in payment module
how can I achieve ?
angular redux module
asked Nov 21 '18 at 13:59
Vaibhav PhutaneVaibhav Phutane
64
add a comment |
In My application I have different lazy loaded module and in each module I need a Count which would be only one for all module
e.g if i increment count in shopping module so i should get this incremented count in payment module
how can I achieve ?
angular redux module
asked Nov 21 '18 at 13:59
Vaibhav PhutaneVaibhav Phutane
64
In My application I have different lazy loaded module and in each module I need a Count which would be only one for all module
e.g if i increment count in shopping module so i should get this incremented count in payment module
how can I achieve ?
angular redux module
angular redux module
asked Nov 21 '18 at 13:59
Vaibhav PhutaneVaibhav Phutane
64
asked Nov 21 '18 at 13:59
Vaibhav PhutaneVaibhav Phutane
64
edited Nov 23 '18 at 20:28
Vaibhav Phutane
asked Nov 21 '18 at 13:59
Vaibhav PhutaneVaibhav Phutane
64
asked Nov 21 '18 at 13:59
Vaibhav PhutaneVaibhav Phutane
64
asked Nov 21 '18 at 13:59
Vaibhav PhutaneVaibhav Phutane
64
64
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
You can get the count in two components in following way :
- Create a
shared.service.tsin which you declare getter setter in following way and add intoApp.module.ts;
// shared.service.ts
import { Injectable } from '@angular/core';
@Injectable()
export class SharedService {
public count =0;
setCount(countValue:number){
this.count+= countValue;
}
getCount():number{
return this.count;
}
}
Services declared in app.module have scope in entire app and they are
initialised only once
So your doubt that : "this would initialise count again to 0 in another module i want to update this count in one module and want to access that modified count in another module" will not happen.
Now in each component where you want to use counter , just call setter and getter functions using the shared service .
Here is the working example :
https://stackblitz.com/edit/angular-ft4etg
PS : Although the example doesn't have lazy loading implemented but to understand the behaviour its sufficient.
answered Nov 24 '18 at 0:36
programoholicprogramoholic
2861424
@programaholic is there any way to subscribe the count so i can get it asynchronously. Will redux help for the same?
– Vaibhav Phutane
Nov 25 '18 at 7:22
If it worked for you then please accept the answer.
– programoholic
Nov 25 '18 at 8:32
How do you want to get it asynchronously ? Can you explain
– programoholic
Nov 25 '18 at 8:35
add a comment |
The best method is to use a shared service. Your service can be accessed by components in each module, and is set up simply:
export class CounterService {
public counter = 0;
constructor() { }
incrementCounter(): void {
this.counter++;
}
getCounter(): void {
return this.counter;
}
}
This has two obvious methods to call, incrementCounter() to add 1 each time, and a get method. You could have (for example) a setCounter() where you can set the value, or a decrementCounter() to reduce by one.
answered Nov 21 '18 at 14:35
rrdrrd
2,84831222
thank you! but this would initialise count again to 0 in another module i want to update this count in one module and want to access that modified count in another module
– Vaibhav Phutane
Nov 23 '18 at 20:25
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%2f53413735%2fhow-to-share-global-count-variable-between-two-modules-in-angular%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 can get the count in two components in following way :
- Create a
shared.service.tsin which you declare getter setter in following way and add intoApp.module.ts;
// shared.service.ts
import { Injectable } from '@angular/core';
@Injectable()
export class SharedService {
public count =0;
setCount(countValue:number){
this.count+= countValue;
}
getCount():number{
return this.count;
}
}
Services declared in app.module have scope in entire app and they are
initialised only once
So your doubt that : "this would initialise count again to 0 in another module i want to update this count in one module and want to access that modified count in another module" will not happen.
Now in each component where you want to use counter , just call setter and getter functions using the shared service .
Here is the working example :
https://stackblitz.com/edit/angular-ft4etg
PS : Although the example doesn't have lazy loading implemented but to understand the behaviour its sufficient.
answered Nov 24 '18 at 0:36
programoholicprogramoholic
2861424
@programaholic is there any way to subscribe the count so i can get it asynchronously. Will redux help for the same?
– Vaibhav Phutane
Nov 25 '18 at 7:22
If it worked for you then please accept the answer.
– programoholic
Nov 25 '18 at 8:32
How do you want to get it asynchronously ? Can you explain
– programoholic
Nov 25 '18 at 8:35
add a comment |
You can get the count in two components in following way :
- Create a
shared.service.tsin which you declare getter setter in following way and add intoApp.module.ts;
// shared.service.ts
import { Injectable } from '@angular/core';
@Injectable()
export class SharedService {
public count =0;
setCount(countValue:number){
this.count+= countValue;
}
getCount():number{
return this.count;
}
}
Services declared in app.module have scope in entire app and they are
initialised only once
So your doubt that : "this would initialise count again to 0 in another module i want to update this count in one module and want to access that modified count in another module" will not happen.
Now in each component where you want to use counter , just call setter and getter functions using the shared service .
Here is the working example :
https://stackblitz.com/edit/angular-ft4etg
PS : Although the example doesn't have lazy loading implemented but to understand the behaviour its sufficient.
answered Nov 24 '18 at 0:36
programoholicprogramoholic
2861424
@programaholic is there any way to subscribe the count so i can get it asynchronously. Will redux help for the same?
– Vaibhav Phutane
Nov 25 '18 at 7:22
If it worked for you then please accept the answer.
– programoholic
Nov 25 '18 at 8:32
How do you want to get it asynchronously ? Can you explain
– programoholic
Nov 25 '18 at 8:35
add a comment |
You can get the count in two components in following way :
- Create a
shared.service.tsin which you declare getter setter in following way and add intoApp.module.ts;
// shared.service.ts
import { Injectable } from '@angular/core';
@Injectable()
export class SharedService {
public count =0;
setCount(countValue:number){
this.count+= countValue;
}
getCount():number{
return this.count;
}
}
Services declared in app.module have scope in entire app and they are
initialised only once
So your doubt that : "this would initialise count again to 0 in another module i want to update this count in one module and want to access that modified count in another module" will not happen.
Now in each component where you want to use counter , just call setter and getter functions using the shared service .
Here is the working example :
https://stackblitz.com/edit/angular-ft4etg
PS : Although the example doesn't have lazy loading implemented but to understand the behaviour its sufficient.
answered Nov 24 '18 at 0:36
programoholicprogramoholic
2861424
You can get the count in two components in following way :
- Create a
shared.service.tsin which you declare getter setter in following way and add intoApp.module.ts;
// shared.service.ts
import { Injectable } from '@angular/core';
@Injectable()
export class SharedService {
public count =0;
setCount(countValue:number){
this.count+= countValue;
}
getCount():number{
return this.count;
}
}
Services declared in app.module have scope in entire app and they are
initialised only once
So your doubt that : "this would initialise count again to 0 in another module i want to update this count in one module and want to access that modified count in another module" will not happen.
Now in each component where you want to use counter , just call setter and getter functions using the shared service .
Here is the working example :
https://stackblitz.com/edit/angular-ft4etg
PS : Although the example doesn't have lazy loading implemented but to understand the behaviour its sufficient.
// shared.service.ts
import { Injectable } from '@angular/core';
@Injectable()
export class SharedService {
public count =0;
setCount(countValue:number){
this.count+= countValue;
}
getCount():number{
return this.count;
}
}// shared.service.ts
import { Injectable } from '@angular/core';
@Injectable()
export class SharedService {
public count =0;
setCount(countValue:number){
this.count+= countValue;
}
getCount():number{
return this.count;
}
}answered Nov 24 '18 at 0:36
programoholicprogramoholic
2861424
answered Nov 24 '18 at 0:36
programoholicprogramoholic
2861424
answered Nov 24 '18 at 0:36
programoholicprogramoholic
2861424
answered Nov 24 '18 at 0:36
programoholicprogramoholic
2861424
2861424
@programaholic is there any way to subscribe the count so i can get it asynchronously. Will redux help for the same?
– Vaibhav Phutane
Nov 25 '18 at 7:22
If it worked for you then please accept the answer.
– programoholic
Nov 25 '18 at 8:32
How do you want to get it asynchronously ? Can you explain
– programoholic
Nov 25 '18 at 8:35
add a comment |
@programaholic is there any way to subscribe the count so i can get it asynchronously. Will redux help for the same?
– Vaibhav Phutane
Nov 25 '18 at 7:22
If it worked for you then please accept the answer.
– programoholic
Nov 25 '18 at 8:32
How do you want to get it asynchronously ? Can you explain
– programoholic
Nov 25 '18 at 8:35
@programaholic is there any way to subscribe the count so i can get it asynchronously. Will redux help for the same?
– Vaibhav Phutane
Nov 25 '18 at 7:22
@programaholic is there any way to subscribe the count so i can get it asynchronously. Will redux help for the same?
– Vaibhav Phutane
Nov 25 '18 at 7:22
If it worked for you then please accept the answer.
– programoholic
Nov 25 '18 at 8:32
If it worked for you then please accept the answer.
– programoholic
Nov 25 '18 at 8:32
How do you want to get it asynchronously ? Can you explain
– programoholic
Nov 25 '18 at 8:35
How do you want to get it asynchronously ? Can you explain
– programoholic
Nov 25 '18 at 8:35
add a comment |
The best method is to use a shared service. Your service can be accessed by components in each module, and is set up simply:
export class CounterService {
public counter = 0;
constructor() { }
incrementCounter(): void {
this.counter++;
}
getCounter(): void {
return this.counter;
}
}
This has two obvious methods to call, incrementCounter() to add 1 each time, and a get method. You could have (for example) a setCounter() where you can set the value, or a decrementCounter() to reduce by one.
answered Nov 21 '18 at 14:35
rrdrrd
2,84831222
thank you! but this would initialise count again to 0 in another module i want to update this count in one module and want to access that modified count in another module
– Vaibhav Phutane
Nov 23 '18 at 20:25
add a comment |
The best method is to use a shared service. Your service can be accessed by components in each module, and is set up simply:
export class CounterService {
public counter = 0;
constructor() { }
incrementCounter(): void {
this.counter++;
}
getCounter(): void {
return this.counter;
}
}
This has two obvious methods to call, incrementCounter() to add 1 each time, and a get method. You could have (for example) a setCounter() where you can set the value, or a decrementCounter() to reduce by one.
answered Nov 21 '18 at 14:35
rrdrrd
2,84831222
thank you! but this would initialise count again to 0 in another module i want to update this count in one module and want to access that modified count in another module
– Vaibhav Phutane
Nov 23 '18 at 20:25
add a comment |
The best method is to use a shared service. Your service can be accessed by components in each module, and is set up simply:
export class CounterService {
public counter = 0;
constructor() { }
incrementCounter(): void {
this.counter++;
}
getCounter(): void {
return this.counter;
}
}
This has two obvious methods to call, incrementCounter() to add 1 each time, and a get method. You could have (for example) a setCounter() where you can set the value, or a decrementCounter() to reduce by one.
answered Nov 21 '18 at 14:35
rrdrrd
2,84831222
The best method is to use a shared service. Your service can be accessed by components in each module, and is set up simply:
export class CounterService {
public counter = 0;
constructor() { }
incrementCounter(): void {
this.counter++;
}
getCounter(): void {
return this.counter;
}
}
This has two obvious methods to call, incrementCounter() to add 1 each time, and a get method. You could have (for example) a setCounter() where you can set the value, or a decrementCounter() to reduce by one.
answered Nov 21 '18 at 14:35
rrdrrd
2,84831222
answered Nov 21 '18 at 14:35
rrdrrd
2,84831222
answered Nov 21 '18 at 14:35
rrdrrd
2,84831222
answered Nov 21 '18 at 14:35
rrdrrd
2,84831222
2,84831222
thank you! but this would initialise count again to 0 in another module i want to update this count in one module and want to access that modified count in another module
– Vaibhav Phutane
Nov 23 '18 at 20:25
add a comment |
thank you! but this would initialise count again to 0 in another module i want to update this count in one module and want to access that modified count in another module
– Vaibhav Phutane
Nov 23 '18 at 20:25
thank you! but this would initialise count again to 0 in another module i want to update this count in one module and want to access that modified count in another module
– Vaibhav Phutane
Nov 23 '18 at 20:25
thank you! but this would initialise count again to 0 in another module i want to update this count in one module and want to access that modified count in another module
– Vaibhav Phutane
Nov 23 '18 at 20:25
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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%2f53413735%2fhow-to-share-global-count-variable-between-two-modules-in-angular%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
