*ngFor Inside *ngIf - 如何正确重写

Question

could some one tell me how to rewrite below *ngIF and *ngFor combination.?

I'm aware about my issue is duplicate but pls understand, this is different.

it's working as fine. but issue what am facing is that <li></li> tag color is not getting changed dynamically. But i could see 'active item' classes are applying properly when sliding from one image to another in DOM.

Here, what i'm trying to achieve is, i don't want show carousel indicator for single image item only . As you can see, i'm rendering image dynamically. Everything is working fine except active class color change.

Please point my mistake where i'm doing wrong.

<div id="myCarousel" class="carousel" data-ride="carousel">
    <ol class="carousel-indicators" id="sliderDots"
        *ngIf="respDataList  &&  respDataList.length > 1">
        <ng-container >
            <li data-target="#myCarousel"
                *ngFor="let li of respDataList; let i = index" [attr.data-slide-to]="i"
                class="{{ (i == 0) ? 'active' : '' }}"></li>
        </ng-container>
    </ol>
    <div class="carousel-inner">
        <div *ngFor="let document of respDataList; let i = index"
            class="{{ (i == 0) ? 'item active' : 'item' }}"
            [innerHTML]="document>
        </div>
    </div>
</div>

This sample demo i've created for some other purpose i want to change it as mentioned above.

Thanks in advance.

Answer 1

Just add

<ol class="carousel-indicators" id="adList" *ngIf="mockData.length > 1">

And you have no indicator for less than 2 elements

https://stackblitz.com/edit/angular-m5gvvj

to make single element only remove // line 16 in app component