How to refresh data automatically in a kendo listView Angular

[hiba]

I am using kendo listview and I have a dynamic data that's why I want to reload data automatically in the listView. Can anyone help me ?

This is the method I used where I add new item in the data of the  lisView "addresses" :

addNewAddress(){

    this.var=false

    if(this.isvalidAddresses){

      this.var = true;

      this.addresses.push(this.oneDamageAddress);

      console.log(this.addresses)

    }

  }

 

And this is my HTML :

<button (click)="addNewAddress()">add</button>

<kendo-listview*ngIf="var"

 

            #listView

            [kendoListViewBinding]="addresses"

            [loading]="loading"

            [containerClass]="'k-d-flex k-flex-col k-flex-nowrap'"

            

        >

            <ng-template

                kendoListViewItemTemplate

                let-dataItem="dataItem"

            >

            <div class="product" >

            <div class="description">

                <div class="product-name">{{ dataItem.streetName }}</div>

                <div class="category-name">{{ dataItem.surname }}</div>

            </div>

            <div class="price">

              <button ><i class="fas fa-trash"></i></button>

            </div>

        </div>           

            </ng-template>

        

</kendo-listview>

[Dimiter Madjarov]

Hi Hiba,

The reason for the observed behaviour is that when a collection is used as an Input for a component, Angular does not track changes to the collection elements in order to trigger a change detection cycle. So in the current case even though the new address is pushed correctly to the addresses collection, Angular is not aware of it.

In order to fix the issue, we could make a copy of the addresses array to a new instance. Passing this new instance to the kendoListViewBinding directive would trigger the change detection cycle.

this.addresses.push(this.oneDamageAddress);
this.addresses = [...this.addresses];

Regards,
Dimiter Madjarov
Progress Telerik