Subject not triggering when being called from parent component in ngOnInit

Question

I'm using Rxjs and Angular 7. I have a parent component and a child component. I have a method to invoke a Subject on my child component:

updateSubject(text: string) {
  this.subject$.next(text);
}

And I'm calling this from my parent component in ngOnInit using ViewChild:

ngOnInit() {
  this.childComponent.updateSubject('New Text');
}

But the subscribe for this.subject$ is never triggered if I am calling it from ngOnInit in the parent component. If I call the method using a button from either parent or child, the the subscribe triggers fine. What am I doing wrong?

See the StackBlitz demonstration here.

You probably subscribe after you call `updateSubject` from `ngOnInit()`. Hard to tell unless you share all the code. — Andrei Tătar, Jul 09 '19 at 09:49

score 3 · Accepted Answer · answered Jul 09 '19 at 09:50

3

The subscribe() in the child is being called after the parent is initialized. Angular initializes components in the same order as the DOM so the parent component is initialized first, and then the child is initialized.

A Subject() throws away emitted values if nothing is subscribed, and since the child is subscribing late it doesn't receive the value.

You can use a BehaviorSubject() or a ReplaySubject() depending if you need an initial value or not.

answered Jul 09 '19 at 09:50

Reactgular

52,335
19
158
208

Sometimes I do need an initial value, other times I don't. Wouldn't you say it would be better to use the `afterViewInit` lifecycle hook to call the method in the child component instead? – ViqMontana Jul 09 '19 at 09:57
@Viqas `afterViewInit` requires a developer to know about this *special* requirement. How would they know? Add documentation, or an example. If they don't use `afterViewInit` is it okay for the child to break? For me, it should not matter what the parent does. – Reactgular Jul 09 '19 at 09:59

score 1 · Answer 2 · answered Jul 09 '19 at 09:50

1

You need to use the AfterViewInit lifecycle hook. Your child component hasn't been rendered yet when OnInit is called.

So this will work:

ngAfterViewInit() {
 this.childComponent.updateSubject('View initialized');
}

answered Jul 09 '19 at 09:50

Knelis

6,782
2
34
54

score 0 · Answer 3 · answered Jul 09 '19 at 10:00

0

Use BehaviorSubject instead of Subject

subject$: BehaviorSubject<string> = new BehaviorSubject<string>(null);

Follow this question to understand difference between Subject and BehaviorSubject

Difference between Subject and BehaviorSubject

answered Jul 09 '19 at 10:00

khush

2,702
2
16
35

Subject not triggering when being called from parent component in ngOnInit

3 Answers3