Ionic - callback after *ngFor finishes

Question

I'm currently working on an application using Ionic (latest) + Angular. And I've built a list using ngFor now I want to call a function after the ngFor finishes.

I have found this: Angular 2: Callback when ngFor has finished yet that doesn't work when using ionic as it gives errors about [ready] not being part of my <ion-item>

My code:

<ion-list>
      <ion-item class="ion-no-padding" *ngFor="let exercise of exercises;"
        (click)="selectExercise($event, exercise.id)" [id]="exercise.id">
        <ion-avatar slot="start">
          <ion-img [src]="exercise.imageUrl"></ion-img>
        </ion-avatar>
        <ion-label">
          <h2>{{exercise.title}}</h2>
          <p>{{exercise.category}}</p>
        </ion-label">
      </ion-item>
</ion-list>

There is nothing special in my Typescript file. All I want to do is to be able to call a function e.g. isReady() after the entire ngFor is done or after my DOM is fully rendered (though after looking around it seems like ionic doesn't support 'ready' or 'load' on my window/document

NOTE: have an app and I use an array + ngFor to built the list. Now when I remove/add an item from the array my ngFor updates my list. I want this function/solution to also be called after my list gets updated

Answer 1

You can simply add this line of code to ion-item,

[ngClass]={ 'someClass': isItSelected(exercizes.id) }

and write isItSelected() function which returns true or false based on your requirement and it will add this class to the ion-item 😊