CODEWITHSUNDEEP
angularcomponents
Jhourlad Estrella
Jhourlad Estrella

Reputation: 3670

Angular: Sharing data between components

Let's say I have 3 components, namely A, B, and C. Component A has this in its HTML:

// a.component.html
<b-component></b-component>
<c-component></c-component>

Is there a way that component A can send data to each of B and C and tell them to update from time to time?

BTW, the question is in Angular, not AngularJS.

Upvotes: 0

Views: 193

Answers (4)

Jagrut Sharma
Jagrut Sharma

Reputation: 4754

Yes, you can do this as below. data_item from component a will be sent to component b.

a.component.html

<b-component [data]="data_item"></b-component>

b.component.ts

@Input()
data: any

Simple demo here: https://stackblitz.com/edit/angular-data-to-component?file=src/app/app.component.html

Upvotes: 1

Soumya Kanti
Soumya Kanti

Reputation: 1479

https://angularfirebase.com/lessons/sharing-data-between-angular-components-four-methods/#Unrelated-Components-Sharing-Data-with-a-Service

Since the components are unrelated, sharing data via Service is a good option.

Upvotes: 0

user10163992
user10163992

Reputation:

Use A's property as an Input parameter for B & C

Upvotes: 0

Abidh
Abidh

Reputation: 467

https://angular.io/guide/component-interaction this document is very useful.You set an @output from component A and set @input in component B and C . When the value of that varibale change emit an event from A which must handle in B and C

this is an example code https://stackblitz.com/edit/angular-component-interaction-4?file=app%2Fvoter%2Fvoter.component.ts

Upvotes: 0

Related Questions