Dynamic Global Variable in different components Angular4

Question

I need help with the following:

I have a variable in a service and I need to give that variable a value in one component and use that variable in another component with the previous value I just assigned that variable to. I included the service in the providers array of the app.module.ts file but when instantiating the service in any component, the value of that variable is reset to the default value defined in the service file (undefined/value assigned to). How do I keep a certain value in a service variable when routing without it changing?

When you say instantiating, do you mean creating a new instance of it? i.e myService: MyService = new MyService(); ? — prettyfly
– prettyfly, Commented Nov 20, 2017 at 13:16
@jfly no, I mean - private serviceInstance : ServiceName - after importing ServiceName. — Dave
– Dave, Commented Nov 20, 2017 at 13:22

prettyfly · Accepted Answer · 2017-11-20 13:24:38Z

2

Services in Angular are inherently singletons. At a guess, i'd say you're instantiating the service in each component with = new MyService() or as an instance variable in your component. This will create a new instance of the service, with its default values. The reason for that is once you've instantiated in a component, and changed a value, the value is only changed in that instance of the service.

In order to keep your service as a singleton (and thus, maintain changes across your app), don't instantiate with the new keyword or as an instance variable. Instead, make sure your service is marked as @Injectable and use the component constructor to inject the singleton.

e.g Service

@Injectable()
export class MyService {
   // service instance variables;
}

Component injection:

constructor(private myService: MyService) {

}

At that point, any variables are accessible via this.myService.variableName and will persist changes across components.

answered Nov 20, 2017 at 13:24

prettyfly

3,1401 gold badge28 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Dave Over a year ago

Thank you @jfly. This works but when routing to other pages (eg - from localhost:4200/profile/david to localhost:4200/account/settings), the value of the variable is set to the default value defined in the service. But when routing from "localhost:4200/profile" to "localhost:4200/profile/david" I do get the value I've assigned the service variable to in the previous view. Is this because all components are newly loaded? Is there a way I can avoid loosing the data in that case?

prettyfly Over a year ago

Hmm, it sounds like you may have some old instances of the service lying around. To be clear, the way I mentioned above should be the way you inject the service to ALL components that need it. If navigating from ../profile/david to ../account/settings resets the value, could whatever component is at ../account/settings still have the service instantiated as a new instance?

Dave Over a year ago

thank you. I started a new project and this solution works perfectly for me. Thanks :)

prettyfly Over a year ago

No problem. Please choose this as the accepted answer so others who come across it can see the solution too :)

Collectives™ on Stack Overflow

Dynamic Global Variable in different components Angular4

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related