Sharing data between two components Angular 7

Question

Hi all and thanks for your time!

I am creating a website with angular 7 and routing. In one component, that shows home(default view), i have an input that asks person for name.

I want to pass this data to my other component. After googling for a long time, i found out i should use services but is it really only option to share data? Anyone got an example of this?

ps: One answer on stackoverflow says "you can use a shared service(using observable) or you can use ngrx/store."

you'll have to be a bit more specific, how persistent should this data be, are you passing it to a backend? is the home component a parent to the 2nd component or are they siblings? — spfellers, Feb 19 '19 at 20:44
Components are siblings(home page<->contact page). Data don't need to be saved, just reachable until person leaves website. The theory is that on home page person enters his name and when he clicks to contact page, there i need that info(name) to be shown. — josip, Feb 19 '19 at 20:55
There’s absolutely no reason to use state management here. The two sibling components can share a parent component which can handle submission of the user info via a call back in the form and injecting that into the other component as a prop. — Marcus, Feb 19 '19 at 20:59
State management becomes useful when you have a deep hierarchy of components or other complexity that justifies the overhead. In the situation you are talking about, I’d just use the callback approach. — Marcus, Feb 19 '19 at 21:00
If you are using routing, there are numerous *additional* ways to pass data as detailed here: https://stackoverflow.com/questions/44864303/send-data-through-routing-paths-in-angular/44865817#44865817 — DeborahK, Feb 19 '19 at 22:25

score 1 · Accepted Answer · edited Dec 20 '19 at 07:36

You can learn angular features from technical documentation https://angular.io/docs

You can share data on a couple of ways depending on expectations and logic:

Parent/child components can use @Input in child component if you want to send object from parent to child component, @Output if you want to send an event from child to parent (this event can bring data)
You can use event emitter with @Injectable service in the same angular module
You can use local storage and session storage if you want to save data on a client
You can use HTTP or WebSockets if you want to save data on a server

score 0 · Answer 2 · edited Dec 20 '19 at 08:21

For now, I managed to do it using local storage so it works. Still i will need to dive deep into passing data these days to understand it better when it comes to getter and setter. for now it looks like this: component 1 HTML:

<button (click)="saveData($event)" class="btn btn-outline-secondary" type="button"
            id="button-addon2">Send</button>

component 1 ts:

 saveData(){ localStorage.setItem('visitor', this.visitor);}

component 2 ts:

visitor = localStorage.getItem('visitor');

maybe someone will find it to be useful.

Sharing data between two components Angular 7

2 Answers2