Angular carousel timer block webapp

i have an issue i am developing a web app in angular V18 my problem is when i implement a carousel this just have text and it must be change every 3 seconds the idea its ok, but in the code when i want to see the page it loads infinitely and no more shows any text image nothing why? please help me, i would apreciate the suggest, i show the code below of the component carousel thank you.

carousel.component.ts

export class PievistaprincipalComponent {
items = ['CONOCE COMO DARLE COMPETITIVIDAD A TU NEGOCIO.','ORGANIZA TUS IDEAS.','AUTOMATIZA TUS PROCESOS.','GENERA Y GESTIONA TU CADENA DE VALOR.'];
private intervaloContador: any;

animate = false;
itemSeleccionado = "";
public contador: number = 4; // Inicializamos el contador en 4 segundos
constructor(){

}
ngOnInit() {
this.itemSeleccionado = this.items[0];
this.change(); //invoke from start web app here loads infintely and dont show nothing
// more
}
ngAfterViewOnInit(){

}

ngOnDestroy() {

}



change(){
this.intervaloContador = setInterval(() => {
this.contador--; // reduce the count by 1
if (this.contador === 0) {
this.contador = 4; // reloads count of slides 0
}
this.currentSlide(this.contador) //put a slide
}, 3000); // every 3 seconds refresh
}

currentSlide(indice: any) {
// console.log(indice);
this.itemSeleccionado = this.items[indice];
this.triggerAnimation();
}

triggerAnimation() {
this.animate = false; // reloads state
setTimeout(() => {
this.animate = true; // activate the animation, this tipe of timer runs ok
}, 10); // wait a bit to reload the class of element
}

resetAnimation() {
this.animate = false; // clean the class after the animation
}

}


carousel.component.html

<div class="carousel-container">
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
<div class="slider-container">
<div class="slider">
<h1
[ngClass]="{'animate__animated animate__backInRight': animate}"
(animationend)="resetAnimation()">
{{itemSeleccionado}}
</h1>
</div>
<div class="dot-container">
<button class="btn"
*ngFor="let item of items; let ind=index"
(click)="currentSlide(ind)">
<span class="dot"></span>
</button>
</div>
</div>
</div>

Continue reading...