2

How can I share data between 2 components in Angular 2

My use-case is that when I log-in, I enter username and password, based on the username and password I decide on the role of the user and I set that role in a service's setter method.

Now I want to get the role that I have set in this component in my next component. When I try to use the getter method to get the role that it gives me null, which I believe is happening because in my second component, the service instance that I am getting is new instance.

How can I achieve something like this, that I can set some data in some common object and I can retrieve from that object in different components.

Please note that I don't want to pass data from one component to another.

Improve this question

3 Answers 3

Reset to default
4

I ran into the same issue, you should add the service to the module level providers list. Then you don't have to new up the service instance each time. Just add it to the constructor, and not to the providers list for the component (The app will know it's a provider because of the module level declaration). Then the data you set in any component will be shared across all components.

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

4 Comments

No, doesn't work. I get an error if I try to do so --> EXCEPTION: Error: Uncaught (in promise): No provider for AuthService!
And when you say "add it to the module level", I have added the service to my bootstrapping component, in my main.ts file
It wouldn't (or at least isn't if you follow the Angular quickstart/tutorial stuff) in the bootstrap file. It would be in the module file, where you use the @NgModule() decorator. That Decorator has a providers property where you can add any of your global providers
@Dave, please edit the answer to accommodate the comment above. Provides more clarification. :)
0

I have created a plunker for this problem http://plnkr.co/edit/acI06AJWCGlgDtDYw5Ut?p=preview. As Dave mentioned when you set some values in the services at the module level it would be available for the child components. in my example I have set some property to the service in my login component, after routing to the home component still is available. you can notice i am able to console.log the value of the "loggedInUser" variable.

 console.log("In Home component loggedInUser : " +  this._SessionService.LoggedInUser);
Improve this answer

1 Comment

Then I really don't know what I am missing :( Here is my code in my main.ts file where I am bootstrapping the service bootstrap(InitialLoadComponent,[APP_ROUTES_PROVIDER,HTTP_PROVIDERS,AuthGaurd,AuthService]); and here in my components, I have not addded this service (AuthService) in my providers directives:[ROUTER_DIRECTIVES], providers:[HTTP_PROVIDERS], But I keep getting this error EXCEPTION: Error: Uncaught (in promise): No provider for AuthService!
0

You should use Component Interaction with @Input and @Output. Below is an Angular walk through on how to implement this functionality! Good luck!

Component Interactions

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.