Why state management matters in Angular - See It in Action

Why state management matters

📖 Scenario: You are building a simple Angular app that tracks a user's favorite color choice. The app needs to remember the color selection and show it on the screen. This simulates how apps keep track of user choices or data over time.

🎯 Goal: Build a small Angular standalone component that stores a color choice in a signal and displays it. This will show why managing state (data that changes) is important in frameworks like Angular.

📋 What You'll Learn

Create a standalone Angular component named FavoriteColorComponent

Use Angular signals to hold the favorite color state

Add a configuration variable defaultColor with the value 'blue'

Create a function changeColor that updates the favorite color signal

Display the current favorite color in the template

Add a button that changes the color to 'red' when clicked

💡 Why This Matters

🌍 Real World

Many apps need to remember user choices or data that changes over time, like selected themes, form inputs, or preferences. State management helps keep this data organized and reactive.

💼 Career

Understanding state management with Angular signals is essential for building modern, interactive web apps that respond smoothly to user actions.

1

Set up the initial color signal

Create a standalone Angular component named FavoriteColorComponent. Inside it, create a signal called favoriteColor initialized with the string 'blue'.

Angular

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

@Component({
  selector: 'app-favorite-color',
  standalone: true,
  template: ``,
})
export class FavoriteColorComponent {
  // Create a signal called favoriteColor initialized to 'blue'
  
}

Need a hint?

Use signal('blue') to create the state holding the color.

2

Add a configuration variable

Inside FavoriteColorComponent, add a variable called defaultColor and set it to the string 'blue'.

Angular

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

@Component({
  selector: 'app-favorite-color',
  standalone: true,
  template: ``,
})
export class FavoriteColorComponent {
  favoriteColor = signal('blue');
  // Add a variable defaultColor set to 'blue'
}

Need a hint?

Just add a simple string variable defaultColor with value 'blue'.

3

Add a function to change the color

Inside FavoriteColorComponent, add a method called changeColor that takes a parameter newColor of type string. Inside the method, update the favoriteColor signal to newColor.

Angular

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

@Component({
  selector: 'app-favorite-color',
  standalone: true,
  template: ``,
})
export class FavoriteColorComponent {
  favoriteColor = signal('blue');
  defaultColor = 'blue';

  // Add a method changeColor(newColor: string) that sets favoriteColor to newColor
}

Need a hint?

Use the set method on the signal to update its value.

4

Display color and add button to change it

In the component's template, display the current favorite color using interpolation with {{ favoriteColor() }}. Add a button with the text Change to Red that calls changeColor('red') when clicked.

Angular

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

@Component({
  selector: 'app-favorite-color',
  standalone: true,
  template: `
    
  `,
})
export class FavoriteColorComponent {
  favoriteColor = signal('blue');
  defaultColor = 'blue';

  changeColor(newColor: string) {
    this.favoriteColor.set(newColor);
  }
}

Need a hint?

Use Angular interpolation {{ favoriteColor() }} to show the signal value. Use (click) event binding on the button.