Angular 19 - Bootstrap Carousel won't start automatically but only after the user interacts...

I fill the parent like this (it is the body of a table)

<td scope="col" class="tbl-string"><app-ordini-jumbotron
[listaProdotti]="ordine.listaProdotti" ></app-ordini-jumbotron </td>
<td scope="col" class="tbl-string">{{ordine.idord}}</td>
<td scope="col" class="tbl-string">{{ordine.idutente}}</td>
<td scope="col" class="tbl-string">{{ordine.idorganizzazione}}</td>
<td scope="col" class="tbl-string">{{ordine.mailverificata}}</td>
<td scope="col" class="tbl-string">{{ordine.pagamentoeseguito}}</td>
<td scope="col" class="tbl-string">{{ordine.date}}</td>
<td scope="col" class="tbl-string">{{ordine.codStat}}</td>


then in the child card component whose comes filled from the *ngFor of the parent


import { CommonModule } from '@angular/common';
import { AfterContentChecked, AfterContentInit, AfterViewInit, ChangeDetectorRef, Component, ElementRef, Input, OnChanges, OnInit, QueryList, SimpleChanges, ViewChild, ViewChildren } from '@angular/core';
import { IArticolo } from '../../../../shared/models/Articolo';
import { OrdiniJumbotronService } from '../../../../core/services/data/ordini-jumbotron.service';
import { startWith } from 'rxjs';

@Component({
selector: 'app-ordini-jumbotron',
standalone: true,
imports: [CommonModule],
templateUrl: './ordini-jumbotron.component.html',
styleUrl: './ordini-jumbotron.component.css'
})
export class OrdiniJumbotronComponent implements OnChanges, AfterViewInit{

@ViewChildren('Item') carouselItems: QueryList<ElementRef> = new QueryList
@ViewChildren('slideButtons') slideButtons: QueryList<ElementRef> = new QueryList

@Input()
Titolo: string = "";
@Input()
SottoTitolo: string = "";
@Input()
Show: boolean = true;
@Input()
listaProdotti: IArticolo[] = [];

idx: number = 0;

constructor() { }

ngAfterViewInit(): void {

this.idx = 0;
console.log(this.carouselItems);
this.carouselItems?.forEach((el, j, arr) => {
if (arr.length === this.listaProdotti.length) {
if (this.idx === j) {
el.nativeElement.classList.add('active');
} else {
el.nativeElement.classList.remove('active');
}
}
})
this.idx = 0;
console.log(this.slideButtons);
this.slideButtons?.forEach((el, j, arr) => {
if (arr.length === this.listaProdotti.length) {
if (this.idx === j) {
el.nativeElement.classList.add('active');
} else {
el.nativeElement.classList.remove('active');
}
}
})
}

ngOnChanges(changes: SimpleChanges): void { }

}

<div id="carouselExampleDark" class="carousel carousel-dark slide img-responsive" #Carousel data-bs-ride="true">
<div class="carousel-indicators">
@for(prodotto of listaProdotti; ; track prodotto; let i = $index){
<button type="button" data-bs-target="#carouselExampleDark" attr.data-bs-slide-to="{{i}}" class="active" aria-current="true" attr.aria-label="Slide {{i}}" #slideButtons></button>
}
</div>
<div class="carousel-inner">
@for(prodotto of listaProdotti; ; track prodotto; let i = $index){
<div class="carousel-item active" #Item data-bs-interval="10000">
<img src="{{prodotto.imgsrc}}" class="image-top" alt="...">
</div>
<div class="bell__count">
<div class="bell__count__digits">
{{prodotto.Prototype}}
</div>
</div>
}
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>

QUESTION #1 : sometimes the two


@ViewChildren('Item') carouselItems: QueryList<ElementRef> = new QueryList
@ViewChildren('slideButtons') slideButtons: QueryList<ElementRef> = new QueryList

in the ngAfterViewInit have values 'undefined' .. don't know why.. i have tryed subscribing like this


ngAfterViewInit() {
this.calculateSerializedPanes();
this.panes.changes.subscribe((r) => {
this.calculateSerializedPanes();
});
}

but got no effect.. subscription never comes fired..

QUESTION #2 : the carousel slide-show won't autoplay until someone doesn't interact with it.. after i press next or previous buttons it starts fine.. can't find an optimal solution..

Here the bootstrap page : https://getbootstrap.com/docs/5.3/components/carousel/

Continue reading...