Angular, how to add timer into carousel?

Question

I have created a carousel following a tutorial from a website. Here is the html code of my carousel;

<div class="row carousel" (mouseover)="mouseCheck()">
                    <!-- For the prev control button -->
                    <button class="control" style="left: 30px;" (click)="prevButton()">
                        <span class="arrow" style="transform: rotate(45deg);"></span>
                    </button>

                    <div class="row car-align">

                        <div *ngFor="let i of currentSlide;" style="width: 184px;" class="card CardBtw">
                            <div @carouselAnimation>
                               <!-- SOME CODE IN HERE -->     
                            </div>
                        </div>

                    </div>

                    <!-- For the control buttons -->
                    <button class="control" style="right: 30px;" (click)="nextButton()">
                        <span class="arrow" style="transform: rotate(225deg);"></span>
                    </button>                    
                </div>

I have succesfully implemented an animation. What I want is to let this carousel cycles in every 10 seconds, while the mouse is not on the carousel. If user puts the mouse on the carousel, then let this 10 seconds start from beginning. I have implemented a function called "mouseCheck()" to detect if mouse is on this . But I couldnt manage to make a cycle in every 10 seconds. How can I do that?

EDIT:

Here are the codes that you all wanted. My mouseover function just console logs when mouse is on (I have created it but couldnt fill it because I couldnt track the time :/ )

I select and hide the showing vector with the help of next and prev button. Here is the function from .ts (Just the next button func, cus prev is similar to this anyways);

//Start from the first vector
  currentSlide = this.laptopSlide[0];

  nextButton() {
      //If the currentSlide is 0
      if(this.currentSlide == this.laptopSlide[0])
        this.currentSlide = this.laptopSlide[1]
      //If currentSlide is 1
      else if(this.currentSlide == this.laptopSlide[1])
        this.currentSlide = this.laptopSlide[2]
      //If current slide is 2
      else if(this.currentSlide == this.laptopSlide[2])
        this.currentSlide = this.laptopSlide[0];
    }

Answer 1

you can create setTimeout function on mouseCheck() fn.

  mouseCheck() {
   if (condiction1 or click == true){
     on.click() => {
         "Give me a function conditione"
      }
    }else {
     setTimeOut({
       console.log("Change by inner content from typescript code on my component")
     }, 2000)
  }