1

I am using ngFor to loop through items. I want to invoke a specific method invokeAfterngForisComplete(). How can I achieve that ?

Here is the ngFor loop

<div *ngFor="let banner of oBanners">
  <a class="btn mr-2" *ngIf="!btn.feedbackery_id"
    [href]="btn.link" target="_blank"
    {{ btn.text }}
  </a>
</div>

In my controller, I want to call invokeAfterngForisComplete() method after all the items in the ngFor loop are rendered.

Rahul Khunt
  • 36
  • 4
  • It's not natively supported. What does that function exactly do? – ruth May 12 '21 at 06:52
  • @MichaelD it _kind of_ is, they could just use ngAfterViewInit. If that solves the issue, this is likely a duplicate. – Dane Brouwer May 12 '21 at 07:01
  • 1
    @DaneBrouwer: Yes that would be a workaround. But it would only be invoked once when the component is initialized. OP hasn't made it clear if the array `oBanners` would be adjusted in the future and if the function `invokeAfterngForisComplete()` needs to be triggered again as well. – ruth May 12 '21 at 07:04
  • 1
    `ngAfterViewInit` can be used to serve this purpose. Learn about the Angular lifecycle hooks. – Anglesvar May 12 '21 at 07:49
  • 2
    Does this answer your question? [Angular 2: Callback when ngFor has finished](https://stackoverflow.com/questions/35819264/angular-2-callback-when-ngfor-has-finished) – Josh May 12 '21 at 07:54
  • `ngAfterViewInit` does not work here as `oBanners` will be filled in the future after api sends response. `ngAfterViewInit` is already invoked by then. @Josh The link that you provide does answer the question but I was looking for some kind of lifecycle method which executes only after all the items in *ngFor is loaded. – Rahul Khunt May 12 '21 at 09:21
  • another way using @ViewChildren: https://stackoverflow.com/questions/37087864/execute-a-function-when-ngfor-finished-in-angular-2/37088348 – Josh May 12 '21 at 10:03

0 Answers0