Angular Signals | change signal and signal effect

Signal
Effect

Angular Signals are reactive primitives introduced in Angular 17. Signals are special variables which hold some values but also provide notification when the value is changed. They are really helpful to manage change detection and to build reactive application.

Think of Signal like a ordinary variable with change detection feature. Whenever the value changes, the signal will notify. They improve performance of application by not using Zone.js.

The default change detection mechanism check whole component tree for changes. Signal offers an easy and efficient way for the same.

Signals Vs Variables

Variables


let x=3;
let y=5;
let sum=x+y;
console.log(sum);       // 8

x=4;
console.log(sum);       // 8

Signals


constructor(){
let x=signal(3);
let y=signal(5);
let z=computed(()=>x()+y());
console.log(z());           // 8
x.set(5);
console.log(z());           // 10
}

Signal

Signal is a primitive variable with build in change detection. It can hold any value like, string, numbers, boolean, Array or Objects.

How to create signal

Lets create a signal name counter. Signal can be used in class, constructor or life cycle hooks. We are using component class to create signal. To check signal value, call the signal.

           <!--app.component.ts-->
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css',
  
})

export class AppComponent {
    title = 'myApp';
    
    counter=signal(0);

}

Print signal

Top use or print signal value, call signal like functions.

           <!--app.component.ts-->
  import { Component } from '@angular/core';
  
  @Component({
    selector: 'app-root',
    standalone: true,
    imports: [],
    templateUrl: './app.component.html',
    styleUrl: './app.component.css',
    
  })
  
  export class AppComponent {
      title = 'myApp';
      
      counter=signal(0);

      ngOnInit(){
        console.log( counter() );
      }
  
  }

           <!--app.component.html-->
    
    <h1>{{title}}</h1>
    <span>Signal value is  {{signal()}}</span>

Change Signal value

To change signal value, use set or update methods as shown in example below. Set is used to add a new value, but update use callback to update value based on previous value.

           <!--app.component.ts-->
  import { Component } from '@angular/core';
  
  @Component({
    selector: 'app-root',
    standalone: true,
    imports: [],
    templateUrl: './app.component.html',
    styleUrl: './app.component.css',
    
  })
  
  export class AppComponent {
      title = 'myApp';
      
      counter=signal(0);

      increase(){
        this.counter.update(i=>i+i);     // will double value
      }

      constructor(){
        
        effect(()=>console.log( `Counter Changed : ${this.counter() }`));     
    
      }
  
  }

Effect

Effect is a function which runs automatically when signal value change. There is no need to call any function and effect will handle change detection and update DOM.

           <!--app.component.ts-->
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css',
})

export class AppComponent {
    title = 'myApp';
    counter=signal(1);

    increase(){
      this.counter.update(i=>i+1);    
    }

    constructor(){

      effect(()=>console.log( `Counter Changed ${this.counter() }`));
  
    }

}