creareapp angularAngular 4 Template e Interpolazione

Le caratteristiche dei template in Angular 4. Come si iniettano dei dati direttamente dal corpo del componente (classe), come si gestiscono variabili locali al template, e come si valorizzano attributo di un tag html del dom o di un componente.

Ultimo aggiornamento: 3 giorni fa

Al di là delle funzionalità di un componente Angular v4, ossia tutto ciò che è inserito all'interno della classe, la sua rappresentazione grafica è sicuramente uno degli elementi distintivi. Abbiamo già visto che, all'interno del codice html del template associato al componente, devono spesso essere mostrati dei dati prelevati da un database, da file JSON, o da parsing di file RSS.

Mentre nel mondo dei siti web si parla di "template" o "pagina web", nel mondo dello sviluppo di web app in Angular 2, si parla di "vista" e "componente", come accade per il mondo Android. Il meccanismo con cui è possibile iniettare dei dati all'interno della vista o template, partendo dalle proprietà (membri) del componente, è chiamato "Interpolazione", e per farlo, si usa la notazione delle doppie parentesi graffe.

Il processo quindi è unidirezionale, dal componente/corpo della classe, alla vista.

Puoi pensare all'interpolazione come all'assegnazione di un "segnaposto" nel template, che verrà usato per andare a sostituire dei valori, manipolati all'interno della classe del componente.

Iniettare valori nel template del componente con {{VALORE}}

Riprendendo il codice del componente sviluppato nel tutorial precedente, potremmo aggiungere al corpo della classe una variabile, e valorizzarla con l'ipotetico dato recuperato in qualche modo da una sorgente esterna, al fine di poterla visualizzare all'interno della pagina. Nel caso del menu, potrebbe essere l'insieme delle voci da visual...

Per continuare la lettura, registrati gratuitamente alla "CreareApp StartUniversity" oppure effettua il login.

Novità

Non farti scappare il nuovo libro: "Angular 100% Operativo", in offerta su Amazon. Più di 200 pagine, con tutto il percorso per creare una WebAPP e imparare Angular in un quarto del tempo. Prenotalo cliccando l'immagine qui sotto:

Corso Angular 4 100% Operativo

Ti è servito il breve tutorial? Condividilo ADESSO sui social! Grazie :-)

Categoria: Articolo - Autore: Davide Copelli

Voto 4.3/5 basato su 85 Recensioni
© 2013-2017 CreareAPP.com - Tutti i diritti riservati. Tutorial e WebCAMP per creare app in Android e iOS
NB: Tutti i marchi citati sono di proprietà dei rispettivi proprietari. Android is a trademark of Google Inc.