Angular 5 share variable between two components

Question

I have a shared variable I want to declare in both component and I want the components to have shared values. I was wondering if this can be done.

A.html

...
<button (click)="sendInfo(a,b,c)" > </button>
...

B.html

...
<div *ngIf="showData" > {{loadData()}} </div> 
...

A.component.ts

...
showData = false;
sendInfo(a: string, b:string, c:string) {
//calling webservice
showData = true;
}
...

B.component.ts

...
showData = false;
//when button from A.html clicked
showData = true;

So in B.component.ts I want to set the showData to true if the button from A.html is clicked.

How does B.component.ts know when A.component.ts has been changed?
How do I set this shared variable between two component?

You can use an EventEmitter to notify one component when the other fires the click event. But that assumes your components are in a parent-child — Ivan Mladenov
– Ivan Mladenov, Commented Sep 14, 2018 at 19:32
the components are sibiling, app.component contains both of those compoents and htmls — logger
– logger, Commented Sep 14, 2018 at 19:33

Martin Nuc · Accepted Answer · 2018-09-14 19:36:29Z

3

If you want to share a variable between two components use a service and observable using ReplaySubject:

export class Service {
   sharedVariable$ = new ReplaySubject(1);
   updateValue(value) {
       this.sharedVariable$.next(value);
   }
}

In components inject the service:

class Component {
   constructor(public service: Service) {}
}

And use in html:

<span>{{service.sharedVariable$ | async}}</span>
<button (click)="service.updateValue(55)">set 55</button>

This is much better than to share variable using component bindings and future proof.

answered Sep 14, 2018 at 19:36

Martin Nuc

5,7943 gold badges45 silver badges52 bronze badges

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

3 Comments

logger Over a year ago

but this create infinite loop calls. I want just to check the data once when the button is clicked.

logger Over a year ago

So in B.html {{ service.sharedVariable$ }} would keep printing the same value repeatedly.

Martin Nuc Over a year ago

there are no infinite calls. You should never call a function in a template. This is observables pattern and it prints out the last value emitted by observable.

Collectives™ on Stack Overflow

Angular 5 share variable between two components

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related