Angular Material Blogs

Concept 01

Understanding Signals Usage in Angular

Signals help you manage reactive state with less boilerplate and predictable UI updates, which fits perfectly with Angular Material component-driven interfaces.

1. TypeScript Code

Book Definition

A signal is a reactive value container. When the signal value changes, Angular automatically updates the places where that signal is read.

Let's dig deeper

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

@Component({
  selector: 'app-root',
  imports: [RouterOutlet],
  templateUrl: './app.html',
  styleUrl: './app.css'
})
export class App {
  protected readonly title = signal('demo1');
  firstName: string = "Payal"

  changeValue(){
    this.title.set("Title changed")
    this.firstName="Kanika"
  }
}

2. HTML Template Code

This template renders both values. After clicking the button, Angular re-renders and you can observe what changed.


<main class="main">
  <div class="content">
    <button (click)="changeValue()">Change Title</button>
    {{firstName}}
    {{title()}}
  </div>
</main>

Quick Quiz

What should be the output when the button is clicked?

Is it going to track only changes to signal or plain string as well?

Explanation

How Signal Is Different from a Normal String?

Plain variable: "Check everything to see what changed."

Signal: "I will tell you exactly what changed."

Correct idea: signals change how Angular checks for updates, not the basic rule of how DOM updates are rendered.

Without Signals

Angular runs broader change detection across bindings in the component tree.
This means many bindings may be checked even when only one value changed.

With Signals

Angular knows exactly which binding depends on which signal.
It skips unnecessary checks.
It updates only affected bindings directly.

What Happens In This Example

1) Click event happens. 2) Angular starts update processing.

title.set(): Angular marks this signal change and updates title()-dependent bindings efficiently.
firstName is a normal variable: it is not signal-tracked, so Angular evaluates it through regular change detection.

If Only Signals Were Used

Angular can avoid broad checking for this update path and target only dependent signal bindings.

Unrelated bindings are skipped.
No unnecessary full template-style scan for this signal-triggered update.
Angular directly updates affected signal bindings like title() and firstName() (if firstName is also a signal).

Angular signals versus normal variable behavior

Final Takeaway

Signals can work without full change detection in advanced setups like zone-less Angular.

In normal Angular apps, change detection still runs, and signals optimize that process.

Signals do not eliminate change detection. They make it smarter and more efficient, so only the necessary parts of the UI update.