Angular input: cosa è e come si usa

In questo articolo vedremo come implementare degli input in un componente costruito con Angular.

Gli input permettono di passare dati da un componente padre ad un componente figlio.

Nel seguito dell’articolo vedremo come si specifica che un componente accetta uno o più input.

Indice

Angular input: cosa è

Come probabilmente saprai, Angular permette di creare dei componenti personalizzati.

Tali componenti spesso hanno necessità di ricevere dei dati in ingresso, da utilizzare ad esempio come configurazione.

Flusso dei dati in Angular. Cortesia di https://v16.angular.io/guide/inputs-outputs

Oltre agli input, i componenti di Angular sono spesso caratterizzati da output.

Angular input: come si usa

Nel seguito dell’articolo vedremo due modi per definire un input di un componente in Angular.

Il primo è l’approccio “tradizionale”, disponibile da Angular 2 in avanti.

Il secondo è un metodo reso disponibile da Angular 17.1 in avanti.

Se non sapessi quale sia la versione di Angular utilizzata nella tua applicazione, ti invito a leggere l’articolo Quale versione Angular usa la mia applicazione?.

In entrambi i casi, si potrà utilizzare l’input value nel modo seguente:

<contatore [value]="3"></contatore>

Angular @Input: l’approccio tradizionale

L’approccio “tradizionale” prevede di utilizzare il decoratore @Input().

Nel seguito, puoi trovare estratto di codice dove dichiariamo che il componente contatore dispone di un input chiamato value.

@Component({
  selector: "contatore",
  standalone: true,
  template: ` <h2>Valore contatore: {{ value }}</h2>`,
})
export class ContatoreComponent {
  @Input()
  value = 0;
}

Angular InputSignal: il nuovo approccio

Questo approccio prevede l’utilizzo di InputSignal.

@Component({
  selector: "contatore",
  standalone: true,
  template: ` <h2>Valore contatore: {{ value() }}</h2>`,
})
export class ContatoreComponent {
  value = input(0);
}

In questo caso, nel template ho dovuto utilizzare value() per inserire il valore corrente dell’input value nel template del componente.

Angular ngOnChanges: come utilizzarlo

ngOnChanges è un lifecycle hook di Angular utilizzato nei componenti per rilevare e gestire le modifiche agli input properties.

A cosa serve ngOnChanges in Angular

ngOnChanges viene chiamato ogni volta che uno o più valori delle proprietà input del componente cambiano.

È utile quando il componente deve reagire a queste modifiche per aggiornare il suo stato interno o eseguire logiche specifiche.

@Component({
  selector: "contatore",
  standalone: true,
  template: ` <h2>Valore contatore: {{ value() }}</h2>`,
})
export class ContatoreComponent implements OnChanges {
  value = input(0);
 
  ngOnChanges(changes: SimpleChanges): void {
    if (changes['value']) {
      console.log('value è cambiato', changes['value']);
    }
  }
}

Angular input: approfondimenti

Se sei arrivato fin qui, probabilmente sei interessato a contenuti relativi ad Angular, JavaScript ed allo sviluppo web.

Eccone alcuni:

Conclusioni

In conclusione, gli input in Angular sono un potente meccanismo per passare dati da un componente genitore a uno figlio, facilitando la comunicazione unidirezionale e consentendo di creare applicazioni modulari e riutilizzabili, grazie a una gestione chiara e strutturata delle dipendenze tra i componenti.