Angular: How I can check if value is not null or undefined before passing it to the child component

Question

I need to manipulate the data in a child component before I use it in a template. I'm getting null in ngOnInit child component. How I can achieve this?

parent.component.html

<child *ngIf="list$"
   [data]="list$ | async">
</child>

parent.component.ts

list$: Observable<any[]>;

ngOnInit(): void {
  this.list$ = this.store.select(getList);
}

child.component.ts

@Input() data: any;

ngOnInit(): void {
  console.log('data', this.data); // null
}

try console logging in AfterViewInit lifecycle hook rather than ngOnInit — Andres2142, Jun 10 '22 at 19:22
Its returning null as well. It will look if subscribe `list$` in parent component but I dont want to subscribe there. Any idea? — Johnny, Jun 10 '22 at 19:33

score 0 · Answer 1 · answered Jun 10 '22 at 19:36

0

Just added async in ngIf

<child *ngIf="(list$ | async) as list"
   [data]="list">
</child>

answered Jun 10 '22 at 19:36

Johnny

261
7
22

Angular: How I can check if value is not null or undefined before passing it to the child component

1 Answers1