CODE EXAMPLE FOR HTML

bootstrap 5 image slider with ngFor

<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel" data-bs-interval="2000">
            <div class="carousel-inner">                
                    
                <div *ngFor="let cat of this.catagoryList |async ;let i=index; first as isFirst" [ngClass]="isFirst ? 'carousel-item active' : 'carousel-item' ">
                    <img src={{cat.data.subcat[0].product[objectKeys(cat.data.subcat[0].product)[0]].product_main_img}} class="d-block w-100 img carousel-pic" alt=".{{i}}.">                   
                </div>                                     
                   
            </div>
 </div>