Why Angular animations matter - See It in Action

Why Angular animations matter

📖 Scenario: You are building a simple Angular app that shows a list of messages. You want to make the app feel friendly and smooth by adding animations when messages appear or disappear.

🎯 Goal: Create an Angular standalone component that displays a list of messages. Add a fade-in animation when messages appear and a fade-out animation when messages are removed. This will help the user notice changes and enjoy a smooth experience.

📋 What You'll Learn

Create a standalone Angular component called MessageListComponent

Define an array of messages in the component

Add a boolean variable called showMessages to control visibility

Use Angular animations to fade messages in and out

Add a button to toggle showMessages and trigger animations

💡 Why This Matters

🌍 Real World

Animations help users notice changes in the app and make the interface feel alive and responsive, just like how lights dim smoothly instead of flickering suddenly.

💼 Career

Knowing Angular animations is useful for frontend developers to create polished, user-friendly web apps that stand out and keep users engaged.

1

Set up the messages array

Create a standalone Angular component called MessageListComponent with an array called messages containing these exact strings: 'Hello', 'Welcome', 'Angular is fun'.

Angular

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

@Component({
  standalone: true,
  selector: 'app-message-list',
  template: ``,
})
export class MessageListComponent {
  // Your code here
}

Need a hint?

Define the messages array inside the component class with the exact strings.

2

Add a visibility toggle variable

Inside MessageListComponent, add a boolean variable called showMessages and set it to true. This will control if the messages are visible or hidden.

Angular

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

@Component({
  standalone: true,
  selector: 'app-message-list',
  template: ``,
})
export class MessageListComponent {
  messages = ['Hello', 'Welcome', 'Angular is fun'];
  // Your code here
}

Need a hint?

Add a boolean variable showMessages and set it to true.

3

Add Angular animations for fade in and fade out

Import trigger, state, style, transition, and animate from @angular/animations. Define an animation trigger called fadeAnimation with two states: visible (opacity 1) and hidden (opacity 0). Add transitions for fading in and out with 500ms ease timing. Add this trigger to the component's animations array.

Angular

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

@Component({
  standalone: true,
  selector: 'app-message-list',
  template: ``,
  animations: [
    // Your animation trigger here
  ]
})
export class MessageListComponent {
  messages = ['Hello', 'Welcome', 'Angular is fun'];
  showMessages = true;
}

Need a hint?

Use Angular's animation functions to create a fade effect with states and transitions.

4

Use the animation in the template with a toggle button

In the component template, add a button with text Toggle Messages that toggles showMessages when clicked. Below the button, use an *ngIf directive to show a ul list only if showMessages is true. Inside the ul, use li elements with *ngFor to display each message from messages. Add the @fadeAnimation binding to the ul with the value showMessages ? 'visible' : 'hidden'. Import CommonModule and BrowserAnimationsModule as needed.

Angular

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { trigger, state, style, transition, animate } from '@angular/animations';

@Component({
  standalone: true,
  selector: 'app-message-list',
  imports: [CommonModule, BrowserAnimationsModule],
  template: `
    
  `,
  animations: [
    trigger('fadeAnimation', [
      state('visible', style({ opacity: 1 })),
      state('hidden', style({ opacity: 0 })),
      transition('hidden => visible', [animate('500ms ease-in')]),
      transition('visible => hidden', [animate('500ms ease-out')])
    ])
  ]
})
export class MessageListComponent {
  messages = ['Hello', 'Welcome', 'Angular is fun'];
  showMessages = true;
}

Need a hint?

Add a button to toggle showMessages. Use *ngIf and *ngFor to show messages. Bind the animation trigger to the ul.