Understanding Angular 8/9 Animations

Angular 8/9 Animations will be covered in this tutorial. Thanks to the Web Angular animations API, Angular is fully equipped with its own DSL and powerful animation engine. This article is meant to be a detailed study of Angular 2+ animations. And we will need to come up with more posts to cover this topic more efficiently.

Demo: https://angular-7-animations.stackblitz.io/

Injecting BroswerAnimationsModule in Angular App

On top of it, in your app module, you will have to import the module named BroswerAnimationsModule.

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

@NgModule({

  imports:      [ BrowserAnimationsModule ],

  declarations: [ ... ],

  bootstrap:    [ ... ]

})

export class AppModule { }

Importing Angular Animation services in the Components

Animations have their own package since Angular 4. You don’t have to depend on @angular/core anymore. So here is how your import statement will turn out:

import { trigger, state, style, transition, animate, group } from '@angular/animations';

Defining Angular Animations

As for the animation declarations in Angular, we keep them in the component metadata, as shown in the example below:

import { Component } from '@angular/core';

import { trigger, state, style, transition, animate, group } from '@angular/animations';

@Component({

  selector: 'my-app',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css'],

  animations: [

    trigger('toggleBox', [

      // ...

      state('open', style({

        height: '200px',

        backgroundColor: '#061ff0'

      })),

      state('closed', style({

        height: '70px',

        backgroundColor: '#E91E63',

      })),

      transition('open => closed', [

        animate('.3s')

      ]),

      transition('closed => open', [

        animate('0.3s')

      ]),

    ])

  ]

})

export class AppComponent {

  isOpen;

  toggle() {

    this.isOpen = !this.isOpen;

    console.log(this.isOpen)

  }

}

Defining Template for Angular 2+ Animations

<button (click)="toggle()">{{isOpen ? 'Close Me' : 'Open Me'}}</button>

<div [@toggleBox]="isOpen ? 'open' : 'closed'" class="custom-style">

  <p>The box is now {{ isOpen ? 'Open' : 'Closed' }}!</p>

</div>