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
}

Answer 1

Just added async in ngIf

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