Angular iterableDiffers not working with a async input

Question

Parent html

<list-component [items]="birds$ | async"></list-component>

list component ts

export class ListComponent implements DoCheck {
  @Input() items: ListItem[];
  listUpdated: IterableDiffer<ListItem>;

  constructor(private iterableDiffers: IterableDiffers) {
    this.listUpdated = this.iterableDiffers.find(this.items).create();
  }

  ngDoCheck() {
    const changes = this.listUpdated.diff(this.items);
    if (changes) {
      console.log('items changed');
    }
  }
}

this.listUpdated = this.iterableDiffers.find(this.items).create();

this line is not working. When I debug this the array is undefined before this is triggered. (This is just a guess, I am not sure if this is true and the issue that It am having).

I dont want to subscribe to the observable from my service because than I am moving the logic to my (generic) component. I this was the case I already solved my issue.

How can I use iterableDiffer with a async input

Answer 1

Simple answer was just assign an empty array as default:

@Input() items: ListItem[] = [];