[solved] Ionic 2 - Callback when ngFor finishes


#1

How to callBack when ngFor finishes?

I need to scroll the page down when it does.


#2

Please create only one question at a time, give people some time to respond. this over here:

Is exactly the same question. Where do you wan’t your topic to be discussed now then?


[solved] How to know when frontend finish rendering?
#3

Sorry, for me they are different. One is about creating an hack through *ngFor. The other one is just finding a way to fix the scroll issue. It might not be using this ngFor callback.

My guess is that Ionic has some kind of “event” to listen to that it’s triggered when the view finished loading.

So, if the answer is the ngFor hack, please answer in this thread. If we have another solution please answer here:

I’ll try to avoid this similar topics, maybe I’ll just ask both questions in one thread next time.
Sorry.

Thank you!


#4

Okay, fair enough. Ionic fires ionViewDidLoad() at the moment the view has been rendered (so everything that should be in the dom at that time is there). It’s different from how an ngFor finishes. Usually I don’t make assumptions in my template about when my ngFor is ‘done’, because you can always add items to an iterable list. So you never really know when it’s done tbh. I usually do these kind of things in the class itself. This has also been discussed on the Angular repo itself over here:

I think you can check for last in a ngFor, but it seems unwanted to me. Nevertheless, here’s a topic at stackOverflow which seems relevant to me (stackoverflow because this is more of an angular2 question then an Ionic question, but always happy to be of some kind of assistence).


#5

Thank you for your answer. So basically there’s no way around this? I gotta hack ngFor?

I did check that stackoverflow question before I posted this, and the solutions doesnt work. I tried all of them.

  1. The accepted answer doesnt work. So typos: Cant use #, and even so, we cant set the ready attribute on ion-item.

  2. The other answer that tells us to use [attr.ready] instead of [ready] also doesnt work. Just nothing happen’s. The @Input method is never called.

  3. The <span *ngIf didnt work because it keeps calling the method infinity.

  4. There’s another answer talking about creating a Directive. It didnt work because @Component didnt accept the “directives” input:

@Component({
  selector: 'messages',
  templateUrl: 'messages.html',
  directives: [MyDirectiveHere]
})

As you can see, you guys are my last hope!


#6

The best way is to solve it inside your class ;), not on the template itself. But that’s my opinion. Maybe someone else could chip in on this, but I think there are good reasons for not implementing such a thing. How do you get your message inside your template? Could you show us some code? Perhaps we can come up with a decent solution for your problem.


#7

Thank you!!

I created this so you can checkout the code:

It’s a simple reproduction of the error


#8

I would look at ng2-page-scroll.


#9

I had an idea!

Check this out:


#10

Still looking to call a method when ngFor finish?

I use following method, if I reckon correctly it was a solution proposed by @mhartington

<div *ngFor="let something of stuffs; let i=index; let last = last;"> 
      {{executeSomethingAtTheEnd(last)}}
</div>

executeSomethingAtTheEnd(lastItem: boolean) {
    if (lastItem) {
       console.log('ngFor just processed the last element');
    }
}

Instant scroll to bottom after Firebase load
#11

Awesome answer.

There’s another way to do this:

 this.intervalId = setInterval( () => {
     this.fetchMessages();
     this.scrollAdjust();
    }, 1000);

 // ...

 scrollAdjust(){
    if(this.shouldScrollDown){
      this.content.scrollToBottom(0);
      this.shouldScrollDown = false;
    }
  }

Maybe we should close this topic and continue here:


#12

OMG bro, u save my life, thanks a lot!