Signals as modern state primitive in Angular - Mini Project: Build & Apply

Signals as Modern State Primitive

📖 Scenario: You are building a simple Angular component to track the number of clicks on a button. Instead of using traditional state management, you will use Angular's signal to hold and update the click count reactively.

🎯 Goal: Create an Angular standalone component that uses a signal to store the click count. The component should display the current count and have a button that increments the count when clicked.

📋 What You'll Learn

Create a signal to hold the click count starting at 0

Add a function to increment the click count signal

Bind the signal value to the template to display the count

Add a button that calls the increment function on click

💡 Why This Matters

🌍 Real World

Signals provide a simple and efficient way to manage reactive state in Angular components, making UI updates automatic and easier to maintain.

💼 Career

Understanding signals is important for modern Angular development, improving performance and code clarity in real-world applications.

1

Set up the click count signal

In the Angular component, import signal from @angular/core and create a signal called clickCount initialized to 0.

Angular

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

@Component({
  selector: 'app-click-counter',
  standalone: true,
  template: ``,
})
export class ClickCounterComponent {
  // Create a signal called clickCount initialized to 0
  
}

Need a hint?

Use signal(0) to create a reactive state variable named clickCount.

2

Add increment function

Add a method called increment inside the component class that increases the clickCount signal value by 1 using the update method.

Angular

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

@Component({
  selector: 'app-click-counter',
  standalone: true,
  template: ``,
})
export class ClickCounterComponent {
  clickCount = signal(0);

  // Add increment method to increase clickCount by 1
  
}

Need a hint?

Use this.clickCount.update(count => count + 1) inside the increment method.

3

Display the click count in the template

In the component's template string, add a paragraph that shows the current value of clickCount using interpolation with {{ clickCount() }}.

Angular

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

@Component({
  selector: 'app-click-counter',
  standalone: true,
  template: `
    
  `,
})
export class ClickCounterComponent {
  clickCount = signal(0);

  increment() {
    this.clickCount.update(count => count + 1);
  }
}

Need a hint?

Use interpolation {{ clickCount() }} inside a paragraph tag in the template.

4

Add button to increment click count

Add a button element inside the template that calls the increment method when clicked using (click)="increment()". The button text should be Click me.

Angular

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

@Component({
  selector: 'app-click-counter',
  standalone: true,
  template: `
    Click count: {{ clickCount() }}
    
  `,
})
export class ClickCounterComponent {
  clickCount = signal(0);

  increment() {
    this.clickCount.update(count => count + 1);
  }
}

Need a hint?

Add a button with (click)="increment()" and text Click me.