-1

I pass data from parent to its child components via BehaviorSubject as the following approach (I simplified the approach for brevity):

const subject = new BehaviorSubject(undefined);

// subscriber A
subject.subscribe((data) => {
    if(data !== undefined)
        ReloadData(data);
    else
         FirstLoadData();
});

subject.next(myDataObtainedFromDatabase);

In the parent component, I pass the obtained data to all of the components that are subscribed to the subject. On the other hand, I check the data parameter in order to detect if it is the first load or not. At first load I retrieve data from Database, and later I pass the data to the components.

My question is that,

1) by using BehaviorSubject (I do not want to use Subject only), is there a better way to load the child components here at first load?

2) For passing data from Parent to Child, is it better to use BehaviorSubject rather than Input() property even if the latter seems to be easier to apply?

  • related: https://stackoverflow.com/questions/44574026/angular-4-rxjs-behaviorsubject-usage-in-service?rq=1 – c69 Aug 01 '19 at 23:59
  • Event emitters are for passing from child to parent, input properties pass from parent to child. – Adrian Brand Aug 02 '19 at 00:05
  • @AdrianBrand Sorry, you right. I meant `Input()` property :) I updated my question. –  Aug 02 '19 at 05:38
  • @c69 Thanks. In that page `ReplaySubject(1)` is suggested instead of using `BehaviorSubject(null)`. But I think `BehaviorSubject` has more advantages and for this reson I want to use it. So, should I use it by initial value check? Any idea? –  Aug 02 '19 at 09:02

1 Answers1

1

You pass objects from parent to child with input properties. On your parent you get the data from the service and put it on an observable property like

data$ = this.dataService.getData();

and in the view pass the data with the async pipe.

<child-component [data]="data$ | async"></child-component>

and in the child component have a data input

@Input()
data: DataType;

Now when the service calls next on the data$ observable it is imagically passed to the child component.

No subscribing and managing subscriptions necessary.

Adrian Brand
  • 15,308
  • 3
  • 24
  • 46
  • Thanks for your great explanations. Actually I meant `Input()` property rather than `EventEmitter` and thought to use `Input()` property. So, in this case: **1)** As you said, there is really no need to make things complicated. By looking my scenario, I have a parent dashboard component and 4 child components in it. I get statistics at first load to the parent. When I add a new record using another component, I pass the new statistics to the parent. By using the approach above I can update all of childs and achieve my goals, is that all true? –  Aug 02 '19 at 06:01
  • **2)** At first load is OK, but later I will update childs from paren as well, but use SignalR for updating parent. In this case does it mean any sense to update childs as the first scenario? The thinkgs that made me confused is about this issue. Any idea? –  Aug 02 '19 at 06:32
  • Have a read of my article on a library I wrote called RxCache, it might help you. https://medium.com/@adrianbrand/angular-state-management-with-rxcache-468a865fc3fb – Adrian Brand Aug 02 '19 at 08:24
  • Thanks a lot, but we avoid using extra library as much as we can (I think to use it in my personal projects). So, in this scene, what do you think about my 2 questions above? regards... –  Aug 05 '19 at 19:01