I'm trying to use a jQuery plugin which replaces the default scrollbar inside some dynamic elements in Angular 2.

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

The application, at some point, mutates an Observable object which iscycled inside the ngFor in order to render the view.

Now, I would like to know when Angular finishes to draw my elements so that I can run the jQuery plugin.

• I don't want to include any javascript in the HTML template.
• I don't want to use the ngAfterViewInit, because this hooks is fired too many times
• I don't want to implement a setTimeout-based solution (I think it's not reliable)

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

{{i | FireStoreEventPipe:'EVENT_TO_BE_FIRED'}}

Where FireStoreEventPipe is something like:

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

But this solution does not satisfy me.

Any suggestion for a better way?

Thanks

I'm trying to use a jQuery plugin which replaces the default scrollbar inside some dynamic elements in Angular 2.

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

The application, at some point, mutates an Observable object which iscycled inside the ngFor in order to render the view.

Now, I would like to know when Angular finishes to draw my elements so that I can run the jQuery plugin.

• I don't want to include any javascript in the HTML template.
• I don't want to use the ngAfterViewInit, because this hooks is fired too many times
• I don't want to implement a setTimeout-based solution (I think it's not reliable)

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

{{i | FireStoreEventPipe:'EVENT_TO_BE_FIRED'}}

Where FireStoreEventPipe is something like:

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

But this solution does not satisfy me.

Any suggestion for a better way?

Thanks

• javascript
• jquery
• typescript
• angular
• ngfor

• If you don't think this is a duplicate add a ment to get it reopened. – Günter Zöchbauer Commented Apr 7, 2016 at 16:44
• I think it's not a duplicate, because I can't use ngAfterViewInit (I tried but it's not ok for me, because it's fired too many times), and I was looking for something better than setTimeout-based solution (that are not reliable). I'll edit my question with these details – Andrea Ialenti Commented Apr 7, 2016 at 16:48
• ngAfterViewInit() is only called once AFAIK I guess it is not often enough. I don't think you'll get another result because Angular doesn't provide anything to call after ngFor updates the DOM. I'd check if the is an issue for this in the GitHub repo otherwise create one. – Günter Zöchbauer Commented Apr 7, 2016 at 16:51
• I think it's a dup of stackoverflow./questions/36011948/… – Günter Zöchbauer Commented Apr 7, 2016 at 16:52
• you want to call function when *ngFor Complete its task ? – Pardeep Jain Commented May 19, 2016 at 8:33

1 Answer 1

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

I solved it by creating a new ponent(a directive didnt 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 in my wanted ponent as child ponent 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()