Get error: Type 'string[] | null' is not assignable to type 'string[]' while using an Observable and async pipe

Question

I can see there are many posts on similar, but not quite the same as my VERY simple situation.

I have a custom component (not mine) that has a string[] input.

Now, when using this, if I have the following, all is fine

//TS
public data = []


// HTML
<my-component [data]="data"></my-component>

However, if I have it to an observable, and even initialize it

// TS
public data: Observable<string[]> = of([]);

// HTML
<my-component [data]="data | async"></my-component>

I get

Type 'string[] | null' is not assignable to type 'string[]'.
  Type 'null' is not assignable to type 'string[]'.ngtsc(2322)

How can I use observable with the async pipe for component input?

Answer 1

You can use Nullish coalescing operator (??) and provide a default value.

<my-component [data]="(data | async) ?? []"></my-component>

Demo @ StackBlitz