Add an Item to a cdkVirtualFor

Question

I am using a cdkVirtualFor due to a large number of users in my list. The list has filtering on it and it works much better when it is a cdkVirtualFor rather than a regular *ngFor.

I now need to add items to the list using

this.filteredUsersList.unshift({});

When I use

<div *ngFor="let user of filteredUserList">
 <div>Each Item</div>
</div>

The new empty item shows at the top of my list.

When I use

<div *cdkVirtualFor="let user of filteredUserList">
  <div>Each Item</div>
</div>

The item does not appear.

I want to continue using cdkVirtualFor. How I can I make the changes to the underlying object show?

Answer 1

Found the answer here. cdkVirtualFor not rendering new items. Basically cdkVirtualFor wants changes to the underlying array the array to be immutable. Using the spread operator instead of unshift did the trick.

let newUser = {}
this.filteredUserNames = [newUser, ...this.filteredUserNames]