create an endless loop to animate in angular2

Is there a way to add iterations, or something similar to the ccs3 animation-iteration-count in Angular 2 animations? I've looked but can't find anything related. How can we apply an infinite play to the animation?

Where should we include that option?


animations: [
    trigger('flyInOut', [
        state('in', style({transform: 'translateX(0)'})),
        transition('void => *', [
            animate(1500, keyframes([
                style({transform: 'translateX(-102%)'}),
                style({transform: 'translateX(102%)'})
            ]))
        ]),
        transition('* => void', [
            animate(1500, keyframes([
                style({transform: 'translateX(-102%)'}),
                style({transform: 'translateX(102%)'})
            ]))
        ])
    ])
]
angulartypescript

Answer №1

In Angular2, there isn't a straightforward method to achieve this task. There is no specific flag or method that can be directly utilized. It seems like the solution lies in manipulating typescript code within your component, as demonstrated below.

this.state="flyIn";

constructor(){
  setTimeout(()=>{
        this.state=this.state=="flyIn"?"flyInOut":"flyIn"; 
                               //attempting to modify the state
  },700)                       //700 is almost half of 1500 milliseconds
}

HTML

[@MyAnimation]="state";

Alternatively,

You may consider employing requestAnimationFrame. However, it's uncertain how well it aligns with the timing requirement of 1500ms illustrated in your scenario.

repeatAnimation() {
  this.state=this.state=="flyIn"?"flyInOut":"flyIn"; 
  requestAnimationFrame(repeatAnimation);
}

constructor(){
  this.requestAnimationFrame(repeatOften);
}

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

Elevate a counter value within a nested for loop in Angular framework

I need to update a count within a nested loop and display the value (e.g. 1,2,3,4) when the table loads. The challenge is that my objects have varying lengths, so with 100 rows in the table, the counter column should display numbers from 1 to 100. <ng- ...

angulartypescript

The Azure repository for Angular is populated with approximately 43,000 distinct files

I've been working on a small Angular project, and whenever I try to deploy it to Azure, it uploads approximately 43,000 files as an artifact. Deployment to Azure isn't exactly my strong suit, so excuse me if this is a silly question. Here's ...

node.jsangularazure

Tips for making concurrent API requests in Angular 7

Can anyone help me with sending multiple requests from different pages in Angular 7 and Typescript? For example, I have a page called Email where I need to send 1000 emails one by one and update the status in a variable. This process should run in the bac ...

angularangular-httpclient

Using Angular2, summon numerous ajax requests and then patiently wait for the results

I'm facing an issue with my Angular code. Here are the functions I've been working on: private callUserInfo(): any { this.isLoading = true; return this._ajaxService.getService('/system/ping') .map( result => { this.user ...

ajaxangular

What happens when Angular elements don't have an injector?

Exploring Angular's custom elements while steering clear of dependency injection is my current experiment. const MyElementElement = createCustomElement(MyElementComponent, { injector }); customElements.define('my-element', MyElementElement) ...

angulartypescript

How can I access Angular in the console through devtools on Angular 8?

I'm currently using Angular 8 and I came across this outdated advice on how to test an AngularJS service from the console on Stack Overflow. Despite following the steps mentioned, I encountered some disappointing output. Angular is running in the dev ...

angularconsolegoogle-chrome-devtoolsangular8

What is causing the undefined value for the http used in this function?

My Code Component import { Component, OnInit } from '@angular/core'; import { Http } from '@angular/http'; @Component({ selector: 'app-root', template: '<button id="testBtn"></button>' }) export c ...

angularhttptypescript

'The condition 'NgIf' does not fall under either 'ComponentType' or 'DirectiveType' category

Encountering an error when using *ngIf in a basic component is quite puzzling. This particular issue seems to be triggered by the following code and app.module setup: app.component.html: <ng-container *ngIf="true"> <div>True</di ...

angularangular-directive

Having trouble with Angular 4 data display? See how to fix a simple example that's

I can't seem to display my data correctly in Angular. When I try, all I get are empty bullet points and an error message that says "Cannot read property of 0 undefined." Even though the code appears to be correct, it's not functioning as expected ...

angulartypescript

Troubleshooting ngFor Issue in Angular 4

I've double-checked all the required modules and scanned for errors, but unfortunately, nothing seems to be helping me at the moment. As a newcomer to Angular, I'm still in the learning phase. Now, let's take a look at my app.module.ts file ...

node.jsangular

Discover how to access all of the response headers from an HTTP request in Angular

Currently, I am utilizing HttpClient to make a request for a `json` file. My intention is to have the file cached using `ETag`, however, this feature does not seem to be functioning as expected. Upon investigation, it appears that the absence of sending of ...

javascriptangular

Persistent Ionic tabs after user logs out - keeping tabs active post-logout

My Ionic app features tabs and authentication. While the authentication process works perfectly, I am facing an issue with the tabs still displaying after logging out. Below is my login method: this.authProvider.loginUser(email, password).then( auth ...

angularionic3

Search for records in MySQL using Typeorm with the condition "column like %var%" to retrieve results containing the specified

Looking for a way to search in MySql using typeorm with the "column like" functionality. async findAll({ page, count, ...where }: CategorySelectFilter): Promise<Category[]> { return this.categoryRepository.find({ where, ...

mysqlnode.jstypescriptnestjstypeorm

Step-by-step guide on invoking an asynchronous method in canActivate for Ionic and Angular

My objective is to acquire a token for authenticating users. I am utilizing the import { Storage } from '@ionic/storage-angular'; to store the data, but I am encountering an issue where the Storage methods only function in asynchronous mode. Her ...

angulartypescriptionic-frameworkcanactivate

Compare two lists in Angular 4 and verify all the elements that are common in both

Two lists are in my possession roles{admin, guest, configuration manager}(contains all roles of the system) loggedInUserRoles {admin , guest}(holds the roles of the currently logged in user) Within a user edit form, there is a checkbox for each user. M ...

angular

The namespace does not have any exported object named 'LocationState'

I encountered the following issue while attempting to execute my TypeScript application: Namespace '"C:/DevTools/git/motor.ui/node_modules/history/index"' has no exported member 'LocationState'. Here is a snippet from my pack ...

javascriptnode.jstypescriptnpm

"Sending the selected pass selector as a parameter to the dispatched action is causing a typing

When a selector changes its value, I want to trigger an action. To achieve this, I passed the selector with a subscription instead of passing an observable. selectedSchedulingsOnPopup$ = this.store.pipe(select(selectSchedulingsByBranch)); this.store.disp ...

javascriptangularreduxrxjsngrx

Exploring the potential of Socket.io and Angular with the seamless integration of

I have encountered an issue regarding the use of async pipe with Observables. Initially, I assumed that returning an Observable from my service on a socket.on event would suffice. However, it appears that my approach is incorrect. Can you guide me on the c ...

angulartypescriptsocket.io

Integrating HTTP JSON responses into HTML using Ionic 2, Angular 2, TypeScript, and PHP: A comprehensive guide

Currently in the midst of developing my first Ionic 2 app, however, my understanding of typescript is still limited.. I aim to execute the authenticate() method within my constructor and then to: Retrieve the entire JSON response into the textarea and/o ...

htmljsonapiangulartypescript

Angular Material datepicker designed for multiple input fields

In my form, I have multiple text box inputs where users enter dates. These fields are populated with values from a single instance of the Angular Material datepicker via TypeScript code. (dateChange)="onDateChange($event) When a user selects a date, such ...

angulardatepicker