Angular 2: *ngFor cause CSS problems

Question

I'm building a slider with a coverflow effect, I used the jquery-flipster plugin for it.

I can import it and make it work like the demo, but when I want to do it dynamicaly with the *ngFor directive, the result is just a simple list without the coverflow effect.

I made the working version like this :

<div id="coverflow">
        <ul class="flip-items">
            <li>
                <img src="../../../img/text1.gif">
            </li>
            <li>
                <img src="../../../img/text2.gif">
            </li>
            <li>
                <img src="../../../img/text3.gif">
            </li>
            <li>
                <img src="../../../img/text4.gif">
            </li>
            <li>
                <img src="../../../img/text5.gif">
            </li>
            <li>
                <img src="../../../img/text6.gif">
            </li>
        </ul>
    </div>

But with the *ngFor directive I got this:

The code :

<div id="coverflow">
    <ul class="flip-items">
        <li *ngFor="let tab of tabs">
            <img [src]="tab.url">
        </li>
    </ul>
</div>

tabs is an array where I stock all my pictures url (in a JSON file).

Answer 1

The ngOnInit() method is too early in the lifecycle to call $('...').flipster() At that point in the lifecycle the dependencies of a component have been injected but the DOM has not been generated so when you call flipster() the query it issues will return empty and the plugin can't do anything.

You should use the ngAfterViewInit() lifecycle method which will be called once the view and content have been configured by angular. For an overview of all of the hooks take a look at the docs.

Finally, if your underlying list is going to be changing at all then you will need to notify the flipster plugin of the change. I'm not sure if this is as simple as calling $('...').flipster() again or if there is something else you have to do to track the changes. The flipster docs don't seem to mention this case.