How can I create an endless animation using Angular6?

I created a 3D truck using HTML and CSS. The truck tires rotate 360 degrees if a variable (x) is true. If x is false, the rotation of the truck tires stops. This was achieved in CSS by setting the rotation to infinite.

.wheel {
   animation: round 2s infinite linear;
}

@keyframes round {
   from {
     transform: rotate(0deg);
   }
   to {
     transform: rotate(360deg);
   }
}

The CSS code works but does not stop the rotation based on the variable. I have decided to use Angular Animations instead:

animations: [

    trigger('x',[
      state('true', style({
        transform: 'rotate(360deg)'
      })),

      transition('* => *', animate('2s'))
    ])
  ]

The truck's tires are rotating for only 2 seconds. Is there a way to make it rotate infinitely in Angular6? I am looking for an infinite rotation, not just 2 seconds. Any help would be greatly appreciated. Thank you...

Answer №1

Have you considered utilizing it in this manner:

[ngClass]="x?'whell':'classWithNoAnimation'"

In the event that x is true, switch to "hell"; otherwise switch to "classWithNoAnimation"

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

Verify internet connectivity with Ionic

Seeking a reliable method to accurately detect whether a mobile device is truly online and connected to the internet. One approach I have explored involves utilizing an http interceptor: if (navigator.connection.type != Connection.NONE) alert("you'r ...

What is the best way to delegate the anonymous function logic contained within the subscribe() method?

Imagine you have a code block similar to this: constructor(private _http: HttpClient) { this.fetchUsers(5); } employees: any[] = []; fetchUsers(count: number) { this._http.get(`https://jsonplaceholder.typicode.com/users`).subscribe( ...

On localhost, Angular 2 route parameters are automatically converted to lowercase, while they stay capitalized on the server

I am currently working on a .NET Angular 2 program that has a route set up like this: <ControllerName>/:id While running it on localhost with IIS Express, the id route parameter automatically gets converted to lowercase in the URL without any addi ...

Failure to Generate stats.json File When Building Angular 6 with --stats-json Flag

Currently, I am facing an issue with generating the stats.json file for my Angular 6 application. Despite trying a few different methods, the file is simply not being created. It seems that my system specifically requires "npm run" before every Angular CLI ...

Passing data into Angular 4 components: a step-by-step guide

I'm facing a dilemma, I'm attempting to transfer data from one component to another in Angular 4, the data seems to be transferred successfully but it does not display, let me show you an example of the code: board.component.ts: import { Compon ...

Formik button starts off with enabled state at the beginning

My current setup involves using Formik validation to disable a button if the validation schema is not met, specifically for a phone number input where typing alphabets results in the button being disabled. However, I encountered an issue where initially, ...

Opting out of notifications using Angular's NGXS

I'm new to NGXS in Angular and have recently learned that you don't need to manually unsubscribe when using the async pipe. However, I am currently subscribing to both query parameters and dispatched actions. Do I still need to manually unsubscri ...

React Native component that enables users to both input their own text and select options from a dropdown menu as they type

Looking to develop a component that combines Text Input and FlatList to capture user input from both manual entry and a dropdown list. Has anyone successfully created a similar setup? I'm facing challenges in making it happen. Here's the scenari ...

Tips on using services for storing and fetching list data in Angular

I currently have two components, the "add-expense" component and the "view-list" component. The "add-expense" component collects expense details from a form and stores them as an object. My goal is to add this object to an empty list within the "expense-li ...

The specified JSX element does no possess any constructors or callable signatures

The root element on the right side of my page is a simple React element that I am currently using. Can you help me troubleshoot and fix the error that is being displayed? https://i.sstatic.net/xdDyn.png ...

Updating the text area value based on the selected option in a dropdown using Typescript within Angular6

I'm currently facing an issue with updating the text area value based on the selection from a dropdown menu. Below is the design of the dialog: https://i.sstatic.net/67U1M.png Here's the code snippet I've incorporated for this functionalit ...

Manage numerous receiving bank accounts, allowing customers to transfer money to each specific account

Managing multiple receiving bank accounts and enabling customers to transfer money to specific accounts is a key requirement in my application. Can Plaid help me achieve this functionality? Could you provide guidance on how to implement this feature using ...

Is it possible for Angular components to retrieve information on the current route and parameters?

I am struggling to understand why it's so difficult... why we are not supposed to care about the route from outside the routed component.... HOWEVER: I am attempting to develop a service so that my header (and any other component) can have access to ...

Discovering nested trees within a tree structure in typescript

Imagine having a tree structure in JavaScript like this: a1 --b ----c1 a2 --b2 --b3 ----c2 If you needed to find c2, the path would be a2->b3->c2 Now, consider the following JSON object representing a family tree: treeFamily = { name ...

The explanation of the Angular tutorial is not displayed correctly

Hi there! I was working on a tutorial in Angular about using geofire location queries with Google Maps. It was quite interesting and I followed all the instructions provided in this video tutorial: . However, when I completed the project and ran it, I ende ...

The function switchMap does not exist in this context

After completing the Angular Tour of Heroes tutorial and some others, I decided to start building apps with Angular 2. One important thing I learned is that when we're listening for changes with a Subject, it's good practice to wait for a few sec ...

Can an HTTP response be considered a single element in an Observable stream from RxJS?

Currently, I am expanding my expertise in RxJs and delving deeper into the world of streams. One aspect that intrigues me is comparing an Http response to an Observable created by using of(). Is it accurate to equate a JSON response to the element 'a ...

Issue with Angular: Service and ngrx returning unexpected undefined values

Currently, I am diving into Angular, focusing on topics like DI, Services, and Ngrx, but I've hit a roadblock that's puzzling me. Interestingly, when I check the values of this.getBase() and this.baseRateSaving in the console, they show up just ...

Cross-Origin Resource Sharing (CORS) Issue: HTTP status is not okay. GoLang Mux API

When trying to perform HTTP requests using an Angular 17 App, I keep encountering the following response from the browser: Access to XMLHttpRequest at 'http://localhost:8082/login' from origin 'http://localhost:4200' has been blocked ...

Modifying the color of the chosen item - ion-select

Can anyone help me with changing the color of the selected item on ion-select? I've tried several solutions without success. Any suggestions? Documentation: https://ionicframework.com/docs/api/select I attempted to use the color property, but it did ...