Why Angular Signals Are the Future of State Management

 A signal is a wrapper around a value that notifies interested consumers when that value changes. Signals can contain any value, from primitives to complex data structures.

Signals are part of the reactivity system introduced to make data flow and change detection more efficient and intuitive. Signals are a new reactive primitive in Angular, allowing you to handle reactive state updates declaratively and more efficiently compared to the traditional RxJS observables or manual ChangeDetection.

What is difference between Normal Variable vs Signal ?

Use signals for reactive state that automatically updates the UI or drives dependent logic.

Use normal variables for simple, static values or when reactivity isn’t needed.

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

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

   name:string ="John"; //Normarly diclear variable

   address = signal("Hydrabad"); //Signal declaration

   course = signal("React"); 

   age = signal(18);

   constructor(){
    const value = this.name;
    setTimeout(() => {  
      this.name = "Sky"; //normal variable
      this.course.set("Angular"); //signal
    },5000);
   }

   onIncrement(){
    this.age.update(oldValue => oldValue+1);
   }

}

  

<p>Name is = {{name}}</p>

<!-- use signal help of pranthis -->

<p>

<input type="text" [value]="address()">

</p>

<p>

    Address is =  {{address()}}

</p>

<p>Course is = {{course()}}</p>

<p>Age is = {{age()}}</p>

<button (click)="onIncrement()"> Increment </button>