🙌 Signal 🙌

• 📌 Un signal contiene sempre un valore
• 📌 Al suo variare, chiunque lo utilizzi è in grado di accedere al nuovo valore
• 📌 La reattività di signal è sincrona ed il suo valore viene propagato istantaneamente
• 📌 Ogni singolo signal è chiamato “producer”

    import {signal} from '@angular/core';
    //...
    export class AppComponent {
      myFirstSignal = signal<number> (1);

      constructor() {
      console.log('My first signal: ', this.myFirstSignal());
      // Output: My first signal: 1
    }
  

🙌 Signal Consumer 🙌

• 📌 Sia i template sia le funzioni che “leggono” i signal (es: computed ed effect) sono chiamati “consumer”
• 📌 E’ possibile “iscriversi” e reagire tramite i consumer, come ad esempio effect
• 📌 Quando questo accade, si crea una “connessione” tra producer <-> consumer simile alla subscription negli observable
• 📌 I producer inviano una notifica di aggiornamento e non direttamente il nuovo valore, che andrà così esplicitamente letto
• 📌 Il consumer potrà decidere di leggere il valore oppure non farlo mai.
• 📌 I consumer sono memoized by default.

🙌 Signal Computed 🙌

• 📌 E’ possibile creare signal definiti “computed” che dipendono dal valore di altri signal
• 📌 Le dipendenze sono dinamiche e possono essere incluse in statement condizionali
• 📌 Sono memoized e lazy evaluated
• 📌 L’intera computazione viene eseguita unicamente al variare dei valori dei suoi consumer e solo se esplicitamente “letti”
• 📌 Le funzioni computed, producendo a loro volta un signal, sono contemporaneamente producer and consumer
• 📌 Sono read only

computed() 👨‍💻

    import {signal, computed} from '@angular/core';
    //...
    export class AppComponent {
        myFirstSignal = signal<number> (1);
     runs = 0;
     myFirstComputedSignal = computed(() => {
          runs++;
          return myFirstSignal() * 2;
        });
      
      constructor() {
     console.log('My computed signal: ', this.myFirstComputedSignal());
        // Output: My computed signal: 2
        console.log('Number of runs: ', this.runs);
        // Output: Number of runs: 1 <-- 1 because the computed signal as been read once
        
     this.myFirstComputedSignal();
        console.log('Number of runs: ', this.runs);
        // Output: Number of runs: 1 <-- still 1 because the value of the signal hasn't changed
        
     this.myFirstSignal.set(2);
        console.log('Number of runs: ', this.runs);
        // Output: Number of runs: 1 <-- because the computed signal as not read again
        
     console.log('My second computed signal: ', this.myFirstComputedSignal());
        // Output: My second computed signal: 4
        console.log('Number of runs: ', this.runs);
        // Output: Number of runs: 2 <-- because the computed signal as been read again
        
        }
      }
  

effect() 👨‍💻

    @Component({...})
    export class AppComponent {
      readonly count = signal(0);
      constructor() {
        // Register a new effect.
        effect(() => {
          console.log(`The count is: ${this.count()})`);
        });
    }
  }
  

important!

    @Component({...})
    export class AppComponent {
      readonly count = signal(0);
      constructor(private injector: Injector) {}

      myBeautifulFunction(): void {
        effect(() => {
          console.log(`The count is: ${this.count()})`);
        }, {injector: this.injector});
      }
  }
  

untracked() 👨‍💻

    effect(() => {
      console.log(`User set to `${currentUser()}` and the counter is ${counter()}`);
    });
    
    effect(() => {
      console.log(`User set to `${currentUser()}` and the counter is ${untracked(counter)}`);
    });
    
  

Observable vs Signal

Observable vs Signal

    //signal
    const $v = computed(() => $foo() * $bar());

    //rxjs
    const v$ = combineLatest([foo$, bar$]).pipe(
          map(([foo, bar]) => foo * bar)
    );
  

Observable vs Signal

    //signal
    const $v = computed(() => $foo() * $bar());

    //rxjs
    const v$ = combineLatest([foo$, bar$]).pipe(
          map(([foo, bar]) => foo * bar)
    );
  

Observable vs Signal

    //signal
    const $v = computed(() => $foo() ?? $bar() ?? 0);

    //rxjs
    const v$ = merge(foo$, bar$).pipe(
        map ((val) => val ?? 0)
    );
  

Observable vs Signal

      //signal
      const $v = computed(() => $foo() ?? $bar() ?? 0);

      //rxjs
      const v$ = merge(foo$, bar$).pipe(
          map ((val) => val ?? 0)
      );
  

Angular mette a disposizione una funzione specifica per convertire gli Observale esistenti in Signal:

toSignal()

👨‍💻

    @Component({
      standalone: true,
      template:`{{ counter() }}`,
    })
    export class FooComponent { 
      counter$ = interval(1000);
      counter  = toSignal(this.counter$);
   }
  

👨‍💻

    @Component({
      standalone: true,
      template:`{{ counter() }}`,
    })
    export class FooComponent {
      counter$ = interval(1000);
      counter =  toSignal(this.counter$, { initialValue: 0 });
   }
  

    //..
    export class AppComponent {
       newTaskInputTitle = ''
      toDoList = signal<ToDoListInterface[]>([]);
      
      addTask() {
        this.toDoList.update((oldList) => [
          ...oldList,
          {
            id: this.toDoList.length + 1,
            completed: false,
            title: this.newTaskInputTitle,
          },
        ]);
    }

    <div>
      <ul>
        @for (task of toDoList(); track $index) {
          <li>{{ task.title }}</li>
        } @empty {
          <li>No tasks</li>
        }
      </ul>
      <p>Total Task: {{ toDoList().length }}</p>
      <div>
        <p>Add new Task</p>
        <input [(ngModel)]="newTaskInput" type="text" />
        <button [disabled]="!newTaskInput" (click)="addTask()">Add_task</button>
      </div>
    </div>
  

👨‍💻

    //..
    export class AppService {
   private _userSignal = signal<UserInterface>({ /* some initial value... */ });
   userSignal = computed(() => this._userSignal);
   constructor(private http: HttpClient) {}
      fetchUser() {
        this.http
          .get<UserInterface>("https://...")
          .subscribe((user) => {
        this._userSignal.set(user);
          });
      }
    }
  

👨‍💻

    @Component({
      /* ... */
    })
    export class AppComponent {
      userServiceSignal = this.appService.userSignal();

      constructor(private appService: AppService) {}

      fetchUser(): void {
        this.appService.fetchUser();
      }
    }
  

👨‍💻

    <h1>User Profile</h1>
    @if (userServiceSignal().id !== 0) {
      <h3>{{ userServiceSignal().name }}</h3>
      <p>{{ userServiceSignal().email }}</p>
    } @else {
      <button (click)="fetchUser()">Fetch User</button>
    }
  

Service 👨‍💻

    //..
    export class ChatService {
      private _messagesSignal = signal<string[]>([]);
      messagesSignal = computed(() => this._messagesSignal);
      private socket$ = webSocket<string>("ws://localhost:3000");
      constructor() {
        this.socket$.subscribe((message) => {
          return this._messagesSignal.update((messages) => [...messages, message]);
        });
      }
      sendMessage(msg: string) {
        this.socket$.next(msg);
      }
    }
  

Component 👨‍💻

    //..
    export class ChatComponent {
      message = '';
      messageReceived = this.chatService.messagesSignal();
      constructor(private chatService: ChatService) {}

      sendMessage() {
        this.chatService.sendMessage(this.message);
        this.message = '';
      }
    }

  

Template 👨‍💻

        <ul>
          @for (message of messageReceived(); track $index) {
          <li>{{ message }}</li>
          } @empty {
          <li>No messages</li>
          }
          <input [(ngModel)]="message" />
          <button [disabled]="!message" (click)="sendMessage()">Send</button>
        </ul>
      

Ogni tipo di operazione sincrona può essere effettuata con i signal 📡

🙌 Ad esempio 🙌

• 📌 Aggiornamento Carrello e-Commerce
• 📌 Sistema di notifiche
• 📌 "Sostituzione di NGRX per specifici use case con store piccoli e semplici"

Signal Input

• 📌 Modalità di gestione della logica di change input molto più facile
• 📌 Integrazione più efficace con la onPush strategy
• 📌 Effect sostituisce ngOnChanges
• 📌 Nessuna breaking change per i componenti padre
• 📌 E’ possibile definire un nome alternativo attraverso la proprietà alias di input

Some code 👨‍💻

 
    export class InputComponent {
      firstName = input<string>();
      // required inputs
      lastName = input.required<string>();
    }
   
    <app-input lastName="Doe"></app-input>   

Some code 👨‍💻

 
    export class InputComponent {
      firstName = input<number, string>(0, {
        alias: "first",
        transform: (value) => value.length,
      });
    }
  
    <app-input first="Marco" /> 
    // Output 5 
  

viewChild / viewChildren

contentChild / contentChildren

• 📌 Sostituzione dei decorators con api signal-based
• 📌 Utilizzo di effect al posto dell’afterviewinit lifecycle
• 📌 contentChild / contentChildren possono essere usati con lo stesso approccio

Some code 👨‍💻

 @Component({
      template: `<h1>SomeComponent</h1>
        <app-input lastName="Pollacci" />`,
      imports: [InputComponent],
    })
    export class SomeComponent {
    childComponent = viewChild(InputComponent);
    constructor() {
        effect(() => console.log(this.childComponent()!.LastName()));
        // Output: Pollacci
      }
    }

Signal Model Input

Sono un tipo speciale di input che consentono a un componente di propagare nuovi valori al componente padre

    import {Component, model, input} from '@angular/core';
    @Component({...})
    export class CustomCheckbox {
      // This is a model input.
      checked = model(false);

      // This is a standard input.
      disabled = input(false);
    }
  

Signal Model Input

Two way binding

    @Component({
      // ...
      // `checked` is a model input.
      // The parenthesis-inside-square-brackets syntax creates a two-way binding
      template: '<custom-checkbox [(checked)]="isAdmin" />',
    })
    export class UserProfile {
      protected isAdmin = false;
    }
  

Signal Model Input

Angular crea automaticamente un output che viene usato come suffisso "Change"

    @Directive({...})
    export class CustomCheckbox {
      // This automatically creates an output named "checkedChange".
      // Can be subscribed to using `(checkedChange)="handler()"` in the template.
      checked = model(false);
    }
  

❗ Principali differenze ❗

• 📌 model() definisce sia un input che un output
• 📌 Il nome dell'output è sempre il nome dell'input con suffisso Change per supportare i collegamenti bidirezionali
• 📌 ModelSignal è un WritableSignal, il che significa che il suo valore può essere modificato da qualsiasi punto utilizzando i metodi set e update.
• 📌 I ModelSignal non supportano le trasformazioni degli input mentre i SignalInput sì