Chapter 14: Angular Animations (Standalone Components)

1. Introduction to Angular Animations

Angular animations are built on top of the @angular/animations package. They use a DSL (Domain Specific Language) to define animation triggers and transitions that respond to component state changes.

2. Setting Up Animations

First, you need to import the BrowserAnimationsModule in your app module or standalone bootstrap. For standalone apps, import it in your root component or main bootstrap file.

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

bootstrapApplication(AppComponent, {
  providers: [],
  imports: [BrowserAnimationsModule]
});
  

3. Animation Trigger, States, and Transitions

The core building blocks of Angular animations are:

• trigger(): Defines an animation trigger bound to an element in the template.
• state(): Defines styles for specific states.
• transition(): Defines the animation between states.
• animate(): Defines timing and style changes during transitions.

4. Example: Fade Animation

Here’s a simple fade-in/fade-out animation example using standalone components:

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

@Component({
  standalone: true,
  selector: 'app-fade-animation',
  template: `
    Toggle

`, styles: [` .box { width: 200px; height: 100px; background-color: #007bff; color: white; display: flex; align-items: center; justify-content: center; margin-top: 10px; border-radius: 4px; } `], animations: [ trigger(‘fadeInOut’, [ state(‘visible’, style({ opacity: 1 })), state(‘hidden’, style({ opacity: 0 })), transition(‘visible <=> hidden’, [ animate(‘500ms ease-in-out’) ]), ]) ] }) export class FadeAnimationComponent { visible = true; toggle() { this.visible = !this.visible; } }

5. Other Animation Types

• Slide: Animate elements sliding in and out using transform: translateX/Y.
• Expand/Collapse: Animate height or width changes for accordion-style UI.
• Sequence & Group: Combine multiple animations in sequence or parallel.

6. Summary

• Angular animations enhance UX by making UI changes smooth and engaging.
• Use trigger, state, transition, and animate to define animations.
• Animations can be easily integrated into standalone components in Angular 20.

Next Chapter Preview