📚 Angular Signals

Angular Framework's Signals is a new reactive mechanism that allows components to share data without the need for explicit bindings. Signals are zero-argument functions that return a value, and they can be used to create observable data streams. When a signal is changed, all of the components that are subscribed to it will be notified of the change. This makes signals a powerful tool for decoupling components and making your application more reactive.

    This addition will roll out in Angular 16
    Current @latest stable is Angular 15

Here are some of the benefits of using Angular Framework Signals:

Decoupling components: Signals can be used to decouple components from each other. This means that components can share data without having to be directly connected to each other. This makes your application more modular and easier to maintain.
Making your application more reactive: Signals can be used to make your application more reactive. This means that components will be able to react to changes in data in real time. This can improve the user experience of your application.
Making your application more efficient: Signals can be used to make your application more efficient. This is because they only notify components that are subscribed to them of changes. This can reduce the number of updates that your application needs to perform.

This is a good way to decouple components, make your application more reactive, and make your application more efficient. It is expected to roll out with Angular 16.

Demo

In this demo code, we create a component called 'AppComponent'. The component has an input field, a button, and a paragraph. The input field is bound to the value of a property called 'value'. The button is bound to a method called updateValue, which sets the value of value to 'New Value'. The paragraph displays the current value of 'value'.

When the user enters a new value into the input field and clicks the button, the value of value is updated to 'New Value'. The paragraph is then updated to display the new value.

<app-root>
  <app-component>
    <h1>Signals</h1>
    <p>This component uses signals to update the text of the button when the value of the input changes.</p>
    <input type="text" [(value)]="value">
    <button (click)="value = 'New Value'">Update</button>
    <p>{{value}}</p>
  </app-component>
</app-root>

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

@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  value = 'Initial Value';

  constructor() { }

  ngOnInit() {
    console.log(this.value);
  }

  updateValue() {
    this.value = 'New Value';
  }
}