Signals vs Observables Angular with example

 In Angular, Signals and Observables are both used for managing and reacting to state changes, but they have different approaches and use cases. Here's a comparison to help clarify their differences:

1. Observables:

Flow Control: Observables have operators (e.g., map, filter, merge, concat) that allow you to transform and manipulate the data stream before it is emitted.

Example (Observable):

import { Observable } from 'rxjs';

export class MyComponent {

 myObservable: Observable<number> = new Observable(observer => {

 setInterval(() => observer.next(Math.random()), 1000);

  });

}

Signals (introduced in Angular 16):

Use Cases:

• Managing application state that needs to trigger UI updates.
• Reacting to changes in application state without the overhead of an entire Observable-based system.

Core Concept: Signals are a new, reactive primitive introduced in Angular 16 to handle reactivity and state changes in a more efficient and simpler manner compared to Observables. They are part of Angular's standalone reactivity model.

Example (Angular Signal):

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

export class MyComponent {

  mySignal = signal(0); // Initial value of 0

  increment() {

    this.mySignal.set(this.mySignal() + 

    1); //Update value

  }

}