async operator on undefined observable

Question

I have a component which shows information only if the observable has data. but when I try to use async operator on the observable I don't see any value. I am confused with the way how async pipe works I think it takes some time to initialize the observable in that case async pipe will not do anything on undefined observable and that's why the component is not showing.

@Component({
  template: `
    <div *ngIf="todo$ | async as todo">
      <div {{todo.name}} </div>
    </div>   
  `
})
export class TodosComponent implements OnInit, OnDestroy {

  todo$: Observable<Todo>;

  constructor(private store: Store<State>) {}

  ngOnInit() {
    this.todo$ = this.store
      .pipe(select(selectTodos));
  }

  ngOnDestroy(): void {
  }
}

I know that async pipe will handle Observable but what if Observable is still undefined will async pipe handle that scenario too. if so is there any suggestion on what I might be doing wrong please note that I have subscribed and check if observable has data.

Answer 1

The async pipe also works with multiple, delayed and initially undefined observables. I made a stackblitz for you to see:

multiple-observable-assigns

It seems like you never get any data out of your select(selectTodos)