Come implementare il Two Way Data Binding in un component angular

Angular è uno dei frameworks più utilizzati nella creazione di Single Page Application. Se ancora non lo conosci ti consiglio di dare un’occhiata sul sito. La documentazione è buona e in poco tempo è possibile imparare a creare applicazioni web molto prestanti.

Il mattone principale che costituisce l’elemento base per la creazione di una SPA è il Componet. Ogni applicazione è il risultato della composizione di più Component , e ciascuno di essi compie una funzione specifica. Prova ad immaginare una tipica pagina web: la barra di navigazione, il corpo del testo, i pulsanti, ecc… possono essere realizzati con un Component. Dal singolo bottone all’intera struttura, ed ogni component può contenere altri component.

Ognuno di questi elementi può interagire con gli altri Components permettendo di ricevere variabili in ingresso usando il decorator @Input( ), ed in uscita con il decorator @Output( ).

Il two way data binding permette di passare dati al Component e ricevere il risultato di una elaborazione, utilizzando una sola variabile, al posto di una variabile in ingresso ed un evento in uscita.

Punto di vista esterno

Nel template un component ha il seguente codice, dove la variabile all’interno delle parentesi quadre [data] è il dato che viene passato al component, mentre l’oggetto all’interno delle parentesi tonde (change) è l’evento scatenato da una qualsiasi azione del Component stesso.

<custom-component [data]="valore" (change)="valore = $event"></custom-component>

Se il component ha il compito di elaborare lo stesso dato passato in ingresso e restituirlo modificato, sia per gli input che per gli output dovrà essere passato lo stesso oggetto. Da qui l’utilità di utilizzare un’unica notazione per ridurre il codice e renderlo più elegante e pulito. Ecco che entra in scena il famoso Two Way Data Binding.

La soluzione che Angular permette è di inserire la variabile tra parentesi tonde a loro volta racchiuse tra parentesi quadre [(data)]. Un trucchetto per ricordarsi questa notazione è la frase banana in the box per la somiglianza delle parentesi tonde al frutto e quelle quadre alla scatola.

<custom-component [(data)]="valore"></custom-component>

Punto di vista interno

Ora il problema è come implementare all’interno del Component questa doppia natura della variabile. Ecco come :

@Component({
  selector: 'custom-component',
  template: `... `
})
export class CustomComponent {

        /** variabile locale per il two-way data binding */
        private _data: string;

        /**  implementazione del two way data bindings */
        @Output() dataChange = new EventEmitter<any>();

        @Input()  get data():any{ return this._data; }
                  set data(d:any){
                        this._data = d;
                        this.dataChange.emit(this._data);
                   };
}

Si crea prima di tutto una variabile privata _data che verrà utilizzata all’interno della classe per eseguire le azioni necessarie alla funzione del Component. Solitamente si antepone il carattere underscore “_” al nome scelto per distinguerla.

All OUTPUT Si crea un oggetto EventEmitter che permette di inviare all’esterno il dato. Lo si deve assegnare ad un oggetto chiamato con il nome della variabile seguito da Change : dataChange utilizzando la notazione CamelCase.

Infine si crea il metodo GET per il decreto INPUT dove si ritorna la proprietà privata _data, ed il rispettivo metodo SET per assegnare il valore e emetterlo all’esterno del Component.

Poche righe di codice per un risultato molto comodo soprattutto per Component riutilizzabili in più parti del codice.