I am facing an issue with passing an Observable down to a child component. I have tried various solutions but none seem to work.
parent.component.ts:
export class ParentComponent {
items$ = of([{name: "Item 1"}, {name: "Item 2"}]);
}
parent.component.html:
<child-component [items$]="items$"></child-component>
child.component.ts:
export class ChildComponent {
@Input() items$?: Observable<Item[]>;
}
child.component.html:
<ul>
<li *ngFor="let item of items$ | async">{{ item.name }}</li>
</ul>
Upon logging items$ in the ChildComponent's ngOnInit(), it shows as undefined. It is important for me to use dynamic streams rather than hardcoded services in order to maintain flexibility. Any suggestions on how to resolve this?
Edit: Apologies for the confusion caused by my mistake. The example provided was simplified for clarity, however, the issue I faced was due to a misplaced closing tag in the HTML code:
<my-component
[field1]="someVar1"
[field2]="anotherVar2">
[items$]="items$">
</my-component>
In spite of no errors being flagged in VSCode and the layout appearing correct, the extra > after [field2]="anotherVar2" caused the problem.