Angular 2 fire events after ngFor

Question

I am trying to use the jQuery plugin which replaces the default scroll bar inside some dynamic elements in Angular 2.

These elements are created using the ngFor loop, that is, I cannot attach jQuery events to the elements it creates.

The application, at some point, mutates the Observable object, which is processed internally by ngFor to display the view.

Now I would like to know when Angular will finish drawing my elements so that I can run the jQuery plugin.

• I do not want to include javascript in the HTML template.
• I do not want to use ngAfterViewInit because this hook is triggered too many times
• I do not want to implement a solution based on setTimeout (I think it is not reliable)

I found a solution using the following custom Pipe : at the end of the ngFor loop in the template, I write:

 {{i | FireStoreEventPipe:'EVENT_TO_BE_FIRED'}} 

Where the FireStoreEventPipe is something like:

 transform(obj: any, args:any[]) { var event = args[0]; //Fire event return null; } 

But this decision does not satisfy me.

Any suggestion for a better way?

thanks

Answer 1

I had a similar problem. I am using angular2 rc 1.

I solved this by creating a new component (the directive did not work for me).

 import { Component, Input, Output, EventEmitter } from '@angular/core'; @Component({ selector: 'islast', template: '<span></span>' }) export class LastDirective { @Input() isLast: boolean; @Output() onLastDone: EventEmitter<boolean> = new EventEmitter<boolean>(); ngOnInit() { if (this.isLast) this.onLastDone.emit(true); } } 

Then I imported into my desired component as a child component in the directives:

 directives: [LastDirective], 

In html:

 <tr *ngFor="let sm of filteredMembers; let last = last; let i=index;" data-id="{{sm.Id}}"> <td> <islast [isLast]="last" (onLastDone)="modalMembersDone()"></islast> </td> </tr> 

And of course implement modalMembersDone ()