Transition between states in Angular - Mini Project: Build & Apply

Transition between states in Angular

📖 Scenario: You are building a simple Angular component that changes its background color when a button is clicked. This simulates a transition between two states: inactive and active.

🎯 Goal: Create an Angular standalone component that toggles a background color between red and green using Angular's signal for state and conditional class bindings for rendering. The background color should smoothly transition when the state changes.

📋 What You'll Learn

Create a standalone Angular component named ColorToggleComponent.

Use Angular's signal to hold the current state called isActive.

Add a button that toggles the isActive state when clicked.

Use class binding ([class.active] and [class.inactive]) to conditionally apply CSS classes for background color.

Add CSS transitions so the background color changes smoothly.

Ensure the component is accessible with proper button labeling.

💡 Why This Matters

🌍 Real World

This project simulates how UI elements can visually respond to user interactions by transitioning between states, a common need in web apps for buttons, toggles, and indicators.

💼 Career

Understanding Angular signals and state-driven UI updates is essential for building modern, reactive Angular applications that provide smooth user experiences.

1

Set up the initial component and state

Create a standalone Angular component named ColorToggleComponent. Inside the component, create a signal called isActive initialized to false. Use the signal function from @angular/core.

Angular

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

@Component({
  selector: 'app-color-toggle',
  standalone: true,
  template: ``,
  styles: []
})
export class ColorToggleComponent {
  // Your code here
}

Need a hint?

Use signal(false) to create the isActive state inside the component class.

2

Add a button to toggle the state

Add a button inside the component's template that toggles the isActive signal when clicked. Use the Angular event binding syntax (click) and call a method named toggleActive().

Angular

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

@Component({
  selector: 'app-color-toggle',
  standalone: true,
  template: `
    
  `,
  styles: []
})
export class ColorToggleComponent {
  isActive = signal(false);

  // Your code here
}

Need a hint?

Create a method toggleActive() that flips the isActive signal value. Bind it to the button's (click) event.

3

Use class binding to change background color

In the component's template, add a div that uses Angular class binding ([class.active] and [class.inactive]) to apply a CSS class active when isActive() is true, and inactive when false. The div should contain the toggle button inside it.

Angular

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

@Component({
  selector: 'app-color-toggle',
  standalone: true,
  template: `
    
  `,
  styles: []
})
export class ColorToggleComponent {
  isActive = signal(false);

  toggleActive() {
    this.isActive.set(!this.isActive());
  }
}

Need a hint?

Use Angular's class binding syntax [class.active] and [class.inactive] to toggle CSS classes based on isActive().

4

Add CSS transitions for smooth color change

Add CSS styles inside the component to define .active with a green background and .inactive with a red background. Add a CSS transition on the background color for smooth changes.

Angular

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

@Component({
  selector: 'app-color-toggle',
  standalone: true,
  template: `
    
      
        Toggle Color
      
    
  `,
  styles: [
    /* Add CSS for .active and .inactive with background colors and transition */
  ]
})
export class ColorToggleComponent {
  isActive = signal(false);

  toggleActive() {
    this.isActive.set(!this.isActive());
  }
}

Need a hint?

Define CSS classes .active and .inactive with green and red backgrounds. Add transition: background-color 0.5s ease; to the div for smooth color changes.