How can I integrate a timer into an Angular carousel feature?

I have put together a carousel based on a tutorial I found on a website. Check out the HTML code for my carousel below:

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

After successfully implementing an animation, I now aim to make the carousel cycle every 10 seconds when the mouse is not hovering over it. If the user places their mouse on the carousel, I want the countdown to reset and start from the beginning. I've created a function called "mouseCheck()" to monitor if the mouse is on the carousel but I'm struggling with setting up the 10-second cycle. Any suggestions on how to achieve this?

EDIT:

As requested, here are the relevant codes. My mouseover function currently only logs a message when the mouse is detected (I haven't fully implemented it as I'm having trouble tracking time). When using the next and previous buttons, I hide and reveal the appropriate vector. Here's the TypeScript function for the next button:

//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];
    }
htmlcssangulartypescriptcarousel

Answer №1

One way to add a setTimeout function within the mouseCheck() function is by using the following code:

  mouseCheck() {
   if (condiction1 or click == true){
     on.click() => {
         "Provide a function condition"
      }
    }else {
     setTimeOut({
       console.log("Modify content dynamically in my component's TypeScript code")
     }, 2000)
  }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to transform an Observable array containing objects into an Observable that emits the data contained within those objects?

Encountering an error: Error: Type 'Observable<Country[]>' is not assignable to type 'Observable'. Type 'Country[]' is missing properties like name, tld, alpha2Code, alpha3Code and more.ts(2322 The issue might be due ...

javascriptangulartypescriptrxjsobservable

Positioning a div above a Bootstrap navbar that disappears when scrolling

I am currently using bootstrap to design a website, and I am attempting to create a div that would initially appear above the navbar on an unscrolled webpage. However, once the user starts scrolling, I want this div to disappear and have the navbar fill it ...

javascriptjqueryhtmlcsstwitter-bootstrap

Filling out a Form in Advance

I'm having trouble populating a form in a new window using JQuery. The new window opens as expected, but I can't get the form to populate successfully. $( "body" ).delegate( ".propose", "click",function() { var url = './prop_form.php& ...

jqueryhtmlforms

Arrange four Divs next to each other with flexbox styling

I've been struggling with aligning my cards side by side. They are a series of divs nested in lists under a <ul> Changing the positioning is not resolving the issue, and I'm hesitant to alter the display as it's crucial for responsive ...

javascripthtmlcssresponsive-designuser-experience

The form submission is yielding an incorrect value

When creating multiple form groups, the issue arises where submitting one form returns the value of the last entered form. export class ExpansionOverviewExample { panelOpenState = false; tables: string[] = ['one', 'two', 'three ...

angularangular9

Change the formatting to eliminate the file extension while ensuring the page is still accessible

I have a subdomain with .php pages in it and I want to remove the .php extension. After researching on various forums, I came up with the following code: RewriteEngine On RewriteBase / RewriteCond %{THE_REQUEST} (\.php(.*)\sHTTP/1) RewriteRu ...

htmlmod-rewriteweb

Issue with asynchronous function: "Cannot assign type 'Promise<MyType[]>[]' to type 'MyType[]'"

After converting this function to async, I've been encountering issues with type annotations being out of sync: export default async function formatCallRecordsForPGPromise( rawCalldata: CallRecord[], ): Promise<SaveableCallRecord[]> { const ...

typescript

browsersync fails to refresh when alterations are made in the .css files

Why is browsersync not injecting the css correctly? Here is my code: const gulp = require('gulp'), sass = require('gulp-sass'), autoprefixer = require('gulp-autoprefixer'), browserSync = require('browser-sync ...

cssgulp

Encountered an unexpected import token in Angular2 (SystemJS)

i am trying to find a solution for this issue in my Angular2 project. I encountered an error and need assistance: `"(SystemJS) Unexpected token import SyntaxError: Unexpected token import at Object.eval (http://....../app.module.js:14:25) at eval (h ...

angular

Why using the display:none property does not successfully conceal Struts 2 tags such as <s:textfield>

I am curious as to why the div tag is unable to hide the Struts2 tags. I have set up a div that should be hidden on load, and using onChange, I am triggering jQuery to toggle the visibility of the div tag... <%@ taglib prefix="s" uri="/ ...

jquerycssjspstruts2struts-tags

Ways to turn off Typescript alerts for return statements

I'm looking to turn off this Typescript warning, as I'm developing scripts that might include return values outside of a function body: https://i.stack.imgur.com/beEyl.png For a better example, check out my github gist The compiled script will ...

typescript

adjust the size of the textarea to perfectly fill the available space

I want my textarea within the wrapctxt container to always fill up the remaining space below the wrapctop section, reaching the bottom of the wrapc element. .panelb{ display:grid; grid-template-columns: 130px 34% auto; height:100vh; width: ...

htmlcssgrid

Unraveling the Mystery: How Angular Handles Propagation of Color CSS Property Settings to Nested Components

Angular's style scope and inheritance are detailed in the guide: The styles defined in @Component metadata only affect the template of that specific component. They do not get passed down to any nested components or projected content. To propagate ...

angular

Create a mechanism in the API to ensure that only positive values greater than or equal to 0 are accepted

My goal is to process the API result and filter out any values less than 0. I've attempted to implement this feature, but so far without success: private handleChart(data: Object): void { const series = []; for (const [key, value] of Object.e ...

javascriptangulartypescripthighcharts

How to Handle Empty Input Data in JQuery Serialization

Having an issue with a form that triggers a modal window containing another form when a button is clicked. The second form includes an input field and send/cancel buttons. The goal is to serialize the data from the modal form and send it to a server using ...

javascriptjqueryajaxhtmlforms

Is there a way for me to confirm the presence of a particular object within an array and return a true value

I am working on a form in Angular that includes checkboxes. I want to automatically check the checkbox if the user has a specific role. Here is my current approach: <form [formGroup]="rolesForm"> <label formArrayName="roles" *ngFor=" ...

arraysangulartypescript

What is the reason behind the Chrome icon flickering momentarily while loading certain web pages?

I recently put together a basic html document, here it is: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8> <title>Just a test.</title> </head> <body> <svg ...

htmlgoogle-chrome

Is it feasible to have fixed headers adopt the width property?

Is there a way to align the widths of table elements while maintaining a fixed header row? If the 'fixed' property is disabled, the width spaces correctly but the header won't stay fixed and will scroll out of the container div. Enabling the ...

htmlcsshtml-tablewidthfixed-header-tables

What is the best way to transfer variables from an ng-template defined in the parent component to a child component or directive?

Is there a way to pass an ng-template and generate all its content to include variables used in interpolation? As I am still new to Angular, besides removing the HTML element, do I need to worry about removing anything else? At the end of this ...

javascriptangularjsangularangular-directiveng-template

Determining the output type by considering the presence of optional parameters

function customFunction<T>(defaultValue?: T) { return defaultValue; } const definitelyNullOrUndefined = customFunction<string>(); // type: string | undefined const definitelyStringType = customFunction<string>('foobar'); // ...

typescript