How can I use setInterval for counter in Angular?

Question

I'm new for Angular, I want to use setInterval function for count number but I couldn't success. Can anyone help me for this one please? (I'm sorry for my bad English skill.) Thanks in advance.

Here 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
    }
  ]
}

Here 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>

I tried to use setInterval function with clearInternal function but I don't know how can I use it in array, at least I don't know what should I write parameter in clearInterval function

{
  id: 0,
  countNumber: setInterval(() => {
    this.startValue++;
    if(this.startValue == 2) { 
      clearInterval()
    }
  },10),
  text: 'Project Complete',
  isRate: false,
},

I want to increase number without button or without click event

Answer 1

I solved that problem with OnInit, if anyone has the same problem, here is the solution;

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.count }}%</span>
      <ng-template #elseBlock>
        {{count.count}}
      </ng-template>
    </div>
    <h4 class="counter-title">{{ count.text }}</h4>
  </div>
</div>

success-facts.component.ts

import {Component, OnInit} from '@angular/core';


@Component({
  selector: 'app-success-facts',
  templateUrl: './success-facts.component.html',
  styleUrls: ['./success-facts.component.css']
})

export class SuccessFactsComponent implements OnInit {
  countNum: number = 0;
  targetCount: number = 100;
  interval: any;


  public successCounterData: any[] = [
    {
      id: 0,
      countNumber: 20000,
      count: 0,
      text: 'Project Complete',
      isRate: false,

    },
    {
      id: 1,
      countNumber: 5000,
      count: 0,
      text: 'Happy Clients',
      isRate: false,
    },
    {
      id: 2,
      countNumber: 25,
      count: 0,
      text: 'Years Experience',
      isRate: false
    },
    {
      id: 3,
      countNumber: 90,
      count: 0,
      text: 'Success Rate',
      isRate: true
    },
    {
      id: 4,
      countNumber: 35,
      count: 0,
      text: 'Expert Advisors',
      isRate: false
    }
  ]

  ngOnInit(): void {
    this.startCounting();
  }

  startCounting() {
    const interval = setInterval(() => {
      let allItemsFinished = true;
      this.successCounterData.forEach((item) => {
        if (item.count < item.countNumber) {
          item.count++;
          allItemsFinished = false;
        }
      });
      if (allItemsFinished) {
        clearInterval(interval);
      }
    }, 1);
  }
}