Angular dynamic elements not working

[vdg437]

I setup my Angular project and I used glider.js in some components with static html which is working perfectly fine.

The view I currently work on has a *ngFor to create the img tags inside the div which glider should display as a carousel.

I tried calling the refresh(true) function inside ngOnInit() and ngAfterViewInit() but it doesnt change anything

As soon as I remove *ngFor and create some elements manually it is working.

You can try it yourself like this:

-- Not working:

<div #glider>
      <div *ngFor="let image of [1,2,3,4], let i = index">Hello {{ i }}</div>
</div>

-- Working

<div #glider>
      <div>Hello 1</div>
      <div>Hello 2</div>
</div>

Could you please help me what I am doing wrong?

If you want I can create a codePen project to clarify the issue

[nosto-mikpou]

I'm not sure whether this would apply to your case but I had similar situation today with VueJS app + Glider. Background for this was to use v-for to loop an array of items which would become slides for Glider. The array content would update by the query results I have in the app.

How I solved this was setting Glider options skipTrack: true and injecting all content to the manually built glider-track wrapper. Then using the Glider's refresh() inside the Vue component's update lifecycle hook. Without the skipTrack the new items would be set outside of the glider-track and thus look broken.

[NickPiscitelli]

I haven't worked with Vue at all, but that approach mentioned seems similar to the one taken by the react-glider module, which is the reason the skipTrack options exists in the first place.

It might be prudent to look to their module on how they solved issues related to component lifecycle management.