5

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

Andrea Ialenti
  • 4,380
  • 2
  • 19
  • 22
  • If you don't think this is a duplicate add a comment to get it reopened. – Günter Zöchbauer Apr 07 '16 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 Apr 07 '16 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 Apr 07 '16 at 16:51
  • I think it's a dup of http://stackoverflow.com/questions/36011948/how-can-i-execute-code-only-after-my-view-with-its-ngfors-and-the-like-has-cha – Günter Zöchbauer Apr 07 '16 at 16:52
  • you want to call function when `*ngFor` Complete its task ? – Pardeep Jain May 19 '16 at 08:33
  • how about this: http://stackoverflow.com/questions/35819264/angular-2-callback-when-ngfor-has-finished – abieganski Sep 06 '16 at 15:16

1 Answers1

4

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

I solved it by creating a new component(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 component as 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()

Nik Tsekouras
  • 289
  • 2
  • 15