Async pipe for template subscriptions in Angular - Mini Project: Build & Apply

Signals for Reactive Click Counter in Angular

📖 Scenario: You are building a simple Angular component that shows a live count of clicks on a button. Use Angular signals to manage reactive state that automatically updates the template.

🎯 Goal: Create an Angular standalone component that uses a signal to track button clicks and displays the count using signal syntax in the template.

📋 What You'll Learn

Create a signal to track the number of button clicks

Use a configuration variable to set the initial click count

Display the signal value in the template to show the current click count

Use Angular standalone component syntax with signals and template syntax

💡 Why This Matters

🌍 Real World

Using Angular signals helps build reactive user interfaces that update automatically without manual subscription management.

💼 Career

Understanding Angular's reactive patterns and template bindings is essential for modern Angular development roles, improving code maintainability and user experience.

1

Create the click count observable

Create a standalone Angular component called ClickCounterComponent. Inside it, 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 {
  // Your code here
}

Need a hint?

Use signal(0) to create a reactive value for the click count.

2

Add initial count configuration

Add a readonly property called initialCount and set it to 5. Then update the clickCount signal to start from initialCount.

Angular

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

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

Need a hint?

Define initialCount as a readonly property and use it to initialize clickCount.

3

Add button click handler to update signal

Add a method called increment that increases the clickCount signal by 1 when called.

Angular

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

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

  // Your code here
}

Need a hint?

Use the update method on the signal to increase the count.

4

Use async pipe in template to display count and button

In the component template, add a button with a click event bound to increment(). Below the button, display the current clickCount signal value using {{ clickCount() }} syntax.

Angular

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

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

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

Need a hint?

Use (click)="increment()" on the button and display the signal value with {{ clickCount() }}.