Stefano Marchisio - sviluppatore freelance: angular | asp.net core mvc c#
Quest'articolo mostra i 4 tipi di databinding presenti in Angular: Iterpolation, Property binding, Event binding, TwoWay binding
Angular è un framework per lo sviluppo di SPA a componenti. Di solito un componente è composto da 3 files: un file .ts , un file .css e un file .html che contiene il template HTML del componente, ma volendo è anche possibile definire tutto in un unico file .ts, sarà responsabilità dello sviluppatore scegliere l’approccio che preferisce. Per cui ogni elemento che vediamo nella UI è un componente ed un componente può essere a sua volta inserito all’interno di un altro componente, formando così una struttura ad albero. In fase di progettazione è necessario quindi, scomporre la UI che desideriamo costruire in sotto componenti che svolgono una specifica funzione. Questo facilità in seguito eventuali modifiche oltre al riutilizzo del codice. Eventualmente, se il progetto è di grandi dimensioni, è buona norma implementare anche pattern architetturali (per esempio stateful e stateless component).
Si ha quindi la necessità che i componenti possano comunicare tra loro:
1) Che il templete HTML possa comunicare con il codice TypeScript del componente corrispondente.
2) Un componente padre possa inviare dati a componenti figlio, così come un componente figlio possa inviare dati al componente padre sotto forma di eventi.
3) Che 2 o più componenti disgiunti possano inviarsi notifiche contenenti dati (RxJs Subject).
In questa serie di articoli vedremo i vari strumenti che Angular ci fornisce per fare ciò, iniziando con il “data binding”, per passare poi ai decoratori di ”@Input” “@Output” ed infine alle “Template Reference Variable”.
Data Binding
Con data binding si intende la capacità di un template HTML di comunicare con il codice TypeScript del componente corrispondente, in modo che la UI verrà automaticamente aggiornata nel momento in cui si modifica il valore di una delle proprietà nel file TypeScript.
A prescindere da Angular, esistono 2 modalità di comunicazione a seconda che questa avvenga in modo unidirezionale (“one way data binding”) o bidirezionale (“two way data binding”).
1) Nel data binding unidirezionale o (“one way data binding”) i dati viaggiano dal modello al template. Aggiornando una proprietà nel modello viene aggiornata in modo automatico l’interfaccia utente.
2) Nel data binding bidirezionale o (“two way data binding”) i dati viaggiano in entrambe le direzioni. Aggiornando una proprietà nel modello viene aggiornata in modo automatico l’interfaccia utente. Editando un elemento sull’interfaccia utente viene aggiornato il modello sottostante.
In Angular abbiamo a disposizione 4 tipi di data binding: Iterpolation, Property binding, Event binding, TwoWay binding. I primi 3 tipi di data binding sono unidirezionali, il quarto tipo di data binding è bidirezionale.
Interpolation data binding
L’ Intepolation data binding usa la seguente sintassi "{ { expression } }" per renderizzare all' interno del template HTML dati presenti nel modello. Con "expression" si intende sia una semplice proprietà presente nel codice TypeScript del componente, che un espressione JavaScript valida.
Property data binding
Il property data binding usa la seguente sintassi “[]” per mettere in collegamento il template HTML con il modello. Viene utilizzato per mettere in comunicazione una proprietà di un elemento HTML (o di un nostro componente) con una proprietà presente nel codice TypeScript del componente.
Interpolation data binding può essere un alternativa al property binding. Angular trasla interpolation data binding nel property data binding nel momento in cui compila il template HTML.
Event data binding
Quando un utente interagisce con la UI di un applicazione (muove il mouse, preme un tasto o un bottone) genera un evento, quest' evento deve poi essere intercettato e gestito nel codice TypeScript del componente. Angular fornisce inoltre la possibilità di creare eventi custom. I’ event data binding usa la seguente sintassi “()” per mettere in collegamento il template HTML con il modello.
Nell’esempio sovrastante si può vedere che l’evento che si desidera intercettare è tra parentesi tonde (a differenza del property data binding in cui si usavano le parentesi quadre). Tra doppi apici viene poi messo il metodo che deve essere chiamato, ed il parametro “$event” è una parola riservata di Angular e serve per passare l’evento originale al metodo (nel nostro caso MouseEvent).
L’esempio sovrastante è simile al precedente, l’unica differenza è che non viene passato “$event” come parametro ma bensì “car”. Infatti è anche possibile passare ad un event-handler una proprietà di data binding visibile dal template. Nel nostro esempio è presente un ciclo for che itera su una collezione cars. Per ogni elemento viene creato un bottone passando all’ event-handler l'oggetto car.
TwoWay data binding
TwoWay data binding usa la seguente sintassi "[()]" per renderizzare all’interno del template HTML i dati presenti nel modello ed aggiornare il modello nel momento in cui si edita l’interfaccia. Come si può vedere non è altro che l’insieme delle 2 sintassi (Property data binding e Event data binding ). Per poterlo utilizzare dobbiamo usare la direttiva “ngModel” contenuta nel modulo “FormsModule”.
Come si può vedere tra parentesi (quadrate e tonde) non si mette più la proprietà, ma la direttiva “ngModel”. La proprietà viene invece assegnata a ciò che abbiamo appena scritto e nel codice TypeScript del componente deve essere presente una proprietà “myfield”. In Angular il twoWay data binding non è poi così strategico perché esistono anche altre strade per poter aggiornare in dati.
Nell’esempio sovrastante all'evento "ngSubmit" è stata assegnata la funzione onSubmit(f) e come parametro viene passata la “Template Reference Variable” contenente direttiva ngForm. Questo mi servirà per recuperare i valori dei campi del form nel codice TypeScript del componente.
Nell’esempio compare anche una nuova sintassi: #f="ngForm". Questa è una “Template Reference Variable” e verranno trattate più avanti in questa serie di articoli.
1) Introduzione ad Angular / Sommario
2) Angular Component Communication (Data Binding) – parte 1
3) Angular Component Communication (decoratori @Input, @Output) – parte 2
5) Cosa sono le “projection” in Angular (ng-content ContentChild ContentChildren)
6) Come manipolare il DOM da un applicazione Angular
Se volete contattarmi il mio profilo Linkedin è il seguente:
Stefano Marchisio - sviluppatore freelance: angular | asp.net core mvc c#
Top comments (0)