Hi all;
imagine a image carousel ng component which loads a list of images from a
remote server (json) and displays them.
the component image list is empty upon creation and makes the remote json
call upon 'contentInit' event and than populates the image list. right
after the list is populated, I need to make a JS call to initialize the
carousel. something in the likes of $('.myCarousel').init().
however it seems like if I call the carousel init immediately the view is
not yet updated and so my carousel does not work properly. in other words,
it takes 'time' for the view to update itself after a property change is
done. (see code below).
this is a reoccurring pattern in my components. I have tried to find other
lifecycle events and hook into them.the only suitable one I have found is
the onchange but it works for @input properties only which is not my case
at all.
I have managed to get what I need (but a dirty solution in my eyes) by
hooking to ngAfterViewChecked plus use some boolean property to execute my
JS carousel init. this works once but a very bad solution architecturally.
can you guys point me to a better solution? it seems like an onchange on a
simple property would be good or a onViewChange or something similar.
thanks!
my component looks something like the below code (simplified version
without my 'dirty solution'):
> @Component({
>
> selector: 'imgCarousel',
>
> template: `
>
> <div class="carousel">
>
> <div *ngFor="let theImg of data"><img src="{{theImg}}"/></div>
>
> </div>`
>
> })
>
> export class ImageCarousel implements OnChanges {
>
> data: string[];
>
> constructor(public http: Http) {... }
>
> ngAfterContentInit() {
>
> this.http.request(this.url).subscribe((res: Response) => {
>
> this.data = res.json();
>
> //cannot make JS to create carousel
> here because it seems it takes sometime for angular to update the template
});
>
> }
>
> }
>
>
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
