Animate method for timing in Angular - Mini Project: Build & Apply

Animate Method for Timing in Angular

📖 Scenario: You are building a simple Angular component that shows a box which changes its background color smoothly over a set time when a button is clicked. This helps users visually notice the change with a nice animation.

🎯 Goal: Create an Angular standalone component that uses the animate method from Angular animations to change the background color of a box over 2 seconds when a button is clicked.

📋 What You'll Learn

Create a standalone Angular component named ColorBoxComponent.

Set up an initial state variable isActive to control the animation.

Add a configuration variable animationTiming with the value '2000ms ease-in-out'.

Use Angular's animate method with the animationTiming variable to animate the background color change.

Add a button that toggles the isActive state to trigger the animation.

💡 Why This Matters

🌍 Real World

Animating UI elements smoothly improves user experience by providing visual feedback and making interfaces feel responsive and polished.

💼 Career

Understanding Angular animations and timing control is essential for frontend developers building interactive web applications with polished user interfaces.

1

Set up initial component and state

Create a standalone Angular component named ColorBoxComponent with a boolean property isActive initialized to false. Include a simple template with a <div> that will be animated later.

Angular

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

@Component({
  selector: 'app-color-box',
  standalone: true,
  template: `
    
      
    
  `,
  styles: [
    ".box { width: 200px; height: 200px; background-color: lightgray; }"
  ]
})
export class ColorBoxComponent {
  // Your code here
}

Need a hint?

Define the component class and add a boolean property isActive set to false.

2

Add animation timing configuration

Inside the ColorBoxComponent class, add a string property called animationTiming and set it to '2000ms ease-in-out' to define the animation duration and easing.

Angular

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

@Component({
  selector: 'app-color-box',
  standalone: true,
  template: `
    
      
    
  `,
  styles: [
    ".box { width: 200px; height: 200px; background-color: lightgray; }"
  ]
})
export class ColorBoxComponent {
  isActive = false;
  // Add animationTiming property below
  // Your code here
}

Need a hint?

Add a property animationTiming with the exact string value '2000ms ease-in-out'.

3

Implement animate method for background color change

Import Angular animation functions trigger, state, style, transition, and animate. Add an @Component animations array that defines a trigger named changeColor. It should have two states: 'inactive' with background color lightgray and 'active' with background color lightgreen. Use the animate method with the animationTiming property for the transition between these states. Update the template <div> to bind the animation trigger to isActive ? 'active' : 'inactive', {timing: animationTiming}.

Angular

import { Component } from '@angular/core';
// Import animation functions here

@Component({
  selector: 'app-color-box',
  standalone: true,
  template: `
    
      
    
  `,
  styles: [
    ".box { width: 200px; height: 200px; background-color: lightgray; }"
  ],
  animations: [
    // Define changeColor trigger here
  ]
})
export class ColorBoxComponent {
  isActive = false;
  animationTiming = '2000ms ease-in-out';
  // Your code here
}

Need a hint?

Use Angular animations with trigger, state, style, transition, and animate. Bind the trigger in the template and use the animationTiming variable as a parameter.

4

Add button to toggle animation state

Add a <button> below the <div> in the template with the text Toggle Color. Bind a click event to a method toggleActive() that toggles the isActive boolean property. Implement the toggleActive() method inside the ColorBoxComponent class.

Angular

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

@Component({
  selector: 'app-color-box',
  standalone: true,
  template: `
    
      
    
    Toggle Color
  `,
  styles: [
    ".box { width: 200px; height: 200px; }"
  ],
  animations: [
    trigger('changeColor', [
      state('inactive', style({ backgroundColor: 'lightgray' })),
      state('active', style({ backgroundColor: 'lightgreen' })),
      transition('inactive  active', [animate('{{timing}}')], { params: { timing: '2000ms ease-in-out' } })
    ])
  ]
})
export class ColorBoxComponent {
  isActive = false;
  animationTiming = '2000ms ease-in-out';
  // Add toggleActive method below
  // Your code here
}

Need a hint?

Add a button with a click event that calls toggleActive(). Implement toggleActive() to switch isActive between true and false.