[Fixed] problems with child components in Angular

Issue

Here is my project: https://stackblitz.com/edit/planificador?file=src/app/planificador/components/resumen/resumen.component.ts

I have a MainContentComponent (parent) within which I have several child components

maincontent.html

Now I see that inside ContratosComponent for example get proyectoId perfectly but in ResumenComponent I get undefined

undefined

ngOnInit

inputs

Any idea please?

Solution

I run the stackblitz and it seems both components returned the proyectoId correctly – so I assume it might depend on some other things as well and not easily reproduced?

Your issue might be that the proyecto$ observable comes from BehaviourSubject. This means that if not value was pushed to that subject, it will emit null.

Your ngIf <div *ngIf="proyecto$ | async as proyecto"> will return true as soon as the observable emits. So, if no proyecto was pushed to the BehaviourSubject, it will return true and proyecto will be null. This might be the cause of your issue.

Again, it’s hard to say because it seems that there is some race condition that causes the issue to not always happen.

Leave a Reply

(*) Required, Your email will not be published