1

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

Flame
  • 33
  • 6

1 Answers1

0

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

Indrajeet
  • 491
  • 3
  • 10
  • Let me know if you find any difficulty – Indrajeet Apr 14 '20 at 12:51
  • Doesn't work the way I want it. I 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 gets called again to make my list match my array. Your function doesn't get called on those changes unfortunately – Flame Apr 14 '20 at 12:57
  • Then why don't you call that fuction after addition/deletion. also if your html is not getting rendered again for some reason, try this.arrObj = [...this.arrObj]; – Indrajeet Apr 14 '20 at 13:05
  • It does render again. As I do this.exercises = [...this.exercises]; to make sure it does. And I've attempted to call that function after but it doesn't get the new dom yet – Flame Apr 14 '20 at 13:10
  • Okay, lets try to fix this. can you tell me why do you need DOM for if you have this.exercises – Indrajeet Apr 14 '20 at 13:12
  • Well I have a list of items and I'm trying to select items (for which when clicking on a dom element I save it's ID). Though when changing 'category' (which removes / adds items to the array) It does show the new items in my list but if I call my function to get all the dom elements of that specific tag name it gets the old ones which means it isn't waiting for the ngFor to finish. And then if I change my category to something else that same function gets called again and then I get the correct dom from my last selection not the new one – Flame Apr 14 '20 at 13:15
  • I see, Actually that should not be the case. are you trying to keep two data structures in sync. meaning some other array apart from exercises? are your ids changing too? – Indrajeet Apr 14 '20 at 13:18
  • The ID is specific to each element of the start array. So example if I have an array of 20 items then item 1 has the id: i_1 and item 20 has the id: i_20. If I then remove item 2 4 5 6 ... item 1 still has the id i_1 and item 20 still has the id i_20. So my id's are constant to the specific item. I save those id's in the secondArray to keep track of which ID is selected then my itention is to everytime my list in HTML changes by ngFor to loop through my items and check if there id is in my selectedId array and if it is then I for example give it a background color of green – Flame Apr 14 '20 at 13:23
  • Ohh, simple do one thing then, I am explaining for the same example that you shared. what you can do is add ***[ngClass]={ 'someClass': isItSelected(exercizes.id) }*** to ion-item. in that function you can always check whether particular Id is present or not and return true or false. based on it's value the class will be applied. – Indrajeet Apr 14 '20 at 13:35
  • So the 'isItSelected' function has to return a true or false for that item and then if it is true it applies the 'someClass' ? – Flame Apr 14 '20 at 13:42