Appunti Angular 17

Segnali

Sono un tipo di variabili "reattive" che consentono di modificare il propio valore in maniera controllata e tenere traccia dei cambiamenti. Sintassi:nomeVariabile = signal(valore)


Esempi:

Nome: Paolo Codice nel file ts:nome = signal('Paolo')Codice nel file html:Nome: {{nome()}}

età: 62 -/- attività: Pensionato Codice nel file ts:dati = signal({eta: 62,attivita: 'Pensionato'});Codice nel file html: età: {{ dati().eta }} -/- attività: {{dati().attivita}}


Impostare un nuovo valore di un segnale:Sintassi:this.nomeVariabile.set(nuovoValore)

Codice nel file ts:this.nome.set('Gianpaolo'); -/- this.dati.set({ "eta": 62,"attivita": "Autista"})


Aggiungere un valore di un segnale:Sintassi:this.nomeVariabile.update(Valore => Valore + 10)

Codice nel file ts:this.nome.update((val) => val + " Ciao")


Controllo di un segnale: effect()

Un effetto è un processo che si attiva ogni volta che c'è un cambiamento in uno o più valori di segnale. Questa funzionalità è implementata utilizzando la funzione effect() nel constructor()Sintassi: constructor() {effect(() => {this.controllo = this.nome()})}

Traccio il nome : Paolo -/- Traccio l'attività : Pensionato

Cliccando sul pulsante Login lo stato della variabile isAuthenticated cambia in TRUE ed essendo questa una variabile signal attiva il processo tramite la funzione effect()Codice nel file ts:
isAuthenticated = signal(false);
constructor() {
effect(() => {
if (this.isAuthenticated()) {
this.nota ='Login effettuato';
} else {
this.nota ='NO Login';
} }); }

nota: NO Login