👾ng-animate Animations for Angular Quickstart

I’ve already discussed the importance of animations in an earlier post about page loaders, so today we’ll expand on this topic by exploring a nifty npm library, ng-animate, and do a quickstart with one basic example of a bouncing ball. 🟠

Procedure

As in previous tutorials, let’s first install Node and npm

• Node: https://nodejs.org/
• npm: https://www.npmjs.com/

Set up the Angular project by installing the Angular CLI tool

npm install -g @angular/cli

Create a project called my-animations

ng new my-animations

Enter the project directory

ng new my-animations

Install ng-animations

npm install ng-animate --save

Configure the app to use Angular Animations

app.config.ts

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

export const appConfig: ApplicationConfig = {
  providers: [
    ...
    provideAnimationsAsync(),
  ],
};

app.ts

import { Component } from '@angular/core';
import { trigger, transition, useAnimation } from '@angular/animations';
import { bounce } from 'ng-animate';

@Component({
  selector: 'app-root',
  imports: [],
  animations: [
    trigger('bounce', [transition('* => *', useAnimation(bounce))])
  ],
  templateUrl: './app.html',
  styleUrls: ['./app.css']
})
export class App {
  bounce: any;
}

app.html

<div class="bounce" [@bounce]="bounce"></div>

app.css

.bounce {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: orange;
}

The result will be shown in the browser at http://localhost:4200/.

Conclusion

I hope you can benefit from this ng-animations quickstart tutorial for Angular projects. Happy Coding!