How To Create Angular Rotate Animations

Animations are cool.

And animations sprinkled here and there inside of your Angular app will help improve the feel and experience of your users.

Today I'm going to show you how to create rotate animations in Angular.

1. Enable the Angular animations module

First, before we can create any Angular animation we have to import the animations module.

If you're using a app.config.ts file to configure your application then you'll import the animations module like this.

import { ApplicationConfig } from '@angular/core';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';

export const appConfig: ApplicationConfig = {
  providers: [
    provideAnimationsAsync()
    // other providers
  ]
};

If you are using an older version of Angular or haven't upgraded to the new app.config.ts configuration yet then you'll need to import the Angular animations module into your app.module.ts file like this.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. Creating the Rotate Animation

Next, we'll open our components Typescript file.

In my case app.component.ts.

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { animate, state, style, transition, trigger } from '@angular/animations';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  animations: [
    trigger('rotate', [
      state('normal', style({
        transform: 'rotate(0deg)'
      })),
      state('rotated', style({
        transform: 'rotate(360deg)'
      })),
      transition('normal <=> rotated', animate('1000ms ease-in-out'))
    ])
  ]
})
export class AppComponent {
  title = 'animations-example';
  rotationState = 'normal';

  rotate() {
    this.rotationState = this.rotationState === 'normal' ? 'rotated' : 'normal';
  }
}

And then we'll open the file app.component.html and add a simple button.

<button [@rotate]="rotationState" (click)="rotate()">Click me to rotate!</button>

And yada!

You've created a rotate animation in Angular. Click on the button and watch it spin.

3. Creating a Spinning Image Animation

Next, we'll open our components Typescript file.

In my case app.component.ts.

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { animate, state, style, transition, trigger } from '@angular/animations';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  animations: [
    trigger('rotate', [
      state('normal', style({
        transform: 'rotate(0deg)'
      })),
      state('rotated', style({
        transform: 'rotate(360deg)'
      })),
      transition('normal <=> rotated', animate('1000ms ease-in-out'))
    ])
  ]
})
export class AppComponent {
  title = 'animations-example';
  rotationState = 'normal';

  rotate() {
    this.rotationState = this.rotationState === 'normal' ? 'rotated' : 'normal';
  }
}

And then we'll open the file app.component.html and add a button and image.

<img src="https://s.gravatar.com/avatar/8a7553a7a7d07e286be31c6fdbb24635?s=180" alt="Daniel" [@rotate]="rotationState">
<button (click)="rotate()">Click me to rotate!</button>

Now click on the button and watch the image spin.

Spinning away...

Daniel Kreider