Why signals are introduced in Angular - See It in Action

Understanding Why Signals Are Introduced in Angular

📖 Scenario: You are building a simple Angular app that shows a counter. You want to update the counter value and see the changes immediately in the UI.Previously, Angular used complex change detection to update the UI. Now, Angular introduces signals to make this easier and faster.

🎯 Goal: Learn how to create and use a signal in Angular to update the UI reactively.Understand why signals help Angular apps perform better and have simpler code.

📋 What You'll Learn

Create a signal to hold a counter value

Create a function to update the counter

Bind the signal value to the template

Explain why signals improve Angular's reactivity

💡 Why This Matters

🌍 Real World

Signals help build fast and responsive Angular apps by making state changes easy to track and update in the UI.

💼 Career

Understanding signals is important for modern Angular development, improving app performance and code maintainability.

1

Create a signal to hold the counter value

In your Angular component, import signal from @angular/core. Then create a signal called counter with the initial value 0.

Angular

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

@Component({
  selector: 'app-counter',
  template: `
    Counter: {{ counter() }}
  `
})
export class CounterComponent {
  // Create a signal called counter with initial value 0
  // Your code here
}

Need a hint?

Use counter = signal(0) inside the component class.

2

Add a function to update the counter

Add a method called increment inside the CounterComponent class. This method should update the counter signal by adding 1 to its current value.

Angular

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

@Component({
  selector: 'app-counter',
  template: `
    Counter: {{ counter() }}
  `
})
export class CounterComponent {
  counter = signal(0);

  // Add increment method to update counter
  // Your code here
}

Need a hint?

Use this.counter.update(value => value + 1) inside the increment method.

3

Bind the increment method to a button in the template

Add a button inside the component template that calls the increment method when clicked. Use Angular's (click) event binding.

Angular

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

@Component({
  selector: 'app-counter',
  template: `
    Counter: {{ counter() }}
    
    
  `
})
export class CounterComponent {
  counter = signal(0);

  increment() {
    this.counter.update(value => value + 1);
  }
}

Need a hint?

Use <button (click)="increment()">Increment</button> inside the template.

4

Explain why signals improve Angular's reactivity

Add a comment inside the component class explaining that signals provide a simple and efficient way to track reactive state changes without complex change detection cycles.

Angular

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

@Component({
  selector: 'app-counter',
  template: `
    Counter: {{ counter() }}
    Increment
  `
})
export class CounterComponent {
  counter = signal(0);

  increment() {
    this.counter.update(value => value + 1);
  }

  // Add a comment explaining why signals are introduced
  // Your code here
}

Need a hint?

Write a comment starting with // Signals provide a simple and efficient way.