0

In the Angular CDK virtual Scrolling I'm using a list and adding items to the list from a button and it works. I'm having another button to remove item from the list but the UI is not refreshed with the removed content.

list: any[];


<cdk-virtual-scroll-viewport autoSize class="list-container lg" itemSize="5">
    <ul *cdkVirtualFor="let item of list; let i = index;  
          let lastItem = last" class="list-group-item list-group-items list-group">
        {{item}}
    </ul>
</cdk-virtual-scroll-viewport>

Adding to list

const item = 4;
this.list = [...this.list, item];

How to remove the item from the list and refresh the view?

Note : I'm using non-observable data source.

S A R
  • 146
  • 3
  • 20

1 Answers1

1

just create new array without the item that you don't need. for example like this

this.list = this.list.filter((item, index) => index !== indexToDelete)
Andrei
  • 10,117
  • 13
  • 21