As a beginner in Angular, I am trying to utilize the setInterval function to count numbers, but I am facing difficulties in achieving success. Can someone provide assistance with this issue? (Apologies for any grammar mistakes in my English.) Thank you in advance.
Below is my success-facts.component.ts
import {Component} from '@angular/core';
@Component({
selector: 'app-success-facts',
templateUrl: './success-facts.component.html',
styleUrls: ['./success-facts.component.css']
})
export class SuccessFactsComponent {
startValue: number = 0;
countNumber: any = setInterval(() => {});
projectCountStop: any = setInterval( () => {
this.countNumber++;
if(this.countNumber === 20 ) {
clearInterval(this.projectCountStop)
}
}, 10 )
public successCounterData: any[] = [
{
id: 0,
countNumber: setInterval(() => {
this.startValue++;
if(this.startValue == 2) {
clearInterval() // I don't know what should I use for parameter here, I should use "countNumber" but I can't use
}
},10),
text: 'Project Complete',
isRate: false,
},
{
id: 1,
countNumber: 5000,
text: 'Happy Clients',
isRate: false,
},
{
id: 2,
countNumber: 25,
text: 'Years Experience',
isRate: false
},
{
id: 3,
countNumber: 90,
text: 'Success Rate',
isRate: true
},
{
id: 4,
countNumber: 35,
text: 'Expert Advisors',
isRate: false
}
]
}
Below is my success-facts.component.html
<div *ngFor="let count of successCounterData" class="count-column">
<div class="inner-box count-box">
<div class="count-outer">
<span *ngIf="count.isRate; else elseBlock" class="count-text">{{ count.countNumber }}%</span>
<ng-template #elseBlock>{{startValue}}</ng-template>
</div>
<h4 class="counter-title">{{ count.text }}</h4>
</div>
</div>
While attempting to use the setInterval function along with clearInterval, I am unsure of how to implement it within an array, particularly the parameter required for the clearInterval function.
{
id: 0,
countNumber: setInterval(() => {
this.startValue++;
if(this.startValue == 2) {
clearInterval()
}
},10),
text: 'Project Complete',
isRate: false,
},
My goal is to increment numbers without the need for a button or click event.