I am currently attempting to utilize a jQuery plugin that replaces the default scrollbar within dynamic elements in Angular 2.
These elements are generated using an ngFor loop, making it impossible to directly attach jQuery events to them.
At some point, the application updates an Observable object which is cycled through in the ngFor for rendering purposes.
Now, I am seeking a way to determine when Angular has finished rendering my elements so that I can execute the jQuery plugin.
- I prefer not to include any JavaScript in the HTML template.
- Using
ngAfterViewInitis not ideal as it fires too frequently. - I do not want to resort to a setTimeout-based solution as I find it unreliable.
I came across a potential solution involving a custom Pipe: at the end of the template's ngFor cycle, I add:
{{i | FireStoreEventPipe:'EVENT_TO_BE_FIRED'}}
The FireStoreEventPipe would look something like this:
transform(obj: any, args:any[]) {
var event = args[0];
//Fire event
return null;
}
However, I am not entirely satisfied with this solution.
Any recommendations for a more effective approach?
Thank you