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 visualizzare, quindi conviene memorizzarle all'interno di un array di stringhe.

@Component({
  selector: 'menuapp',
  templateUrl : 'codicemenu.htm'  
})

export class MioMenu {
  vocimenu: string[]; //array vuoto di stringhe
  constructor() {
    this.vocimenu = ["Link1","Link2","Link3"];
  }  
}

Per definire l'array, abbiamo usato la stessa notazione che si usa in JavaScript, quindi non c'è nulla di nuovo. All'interno del costruttore, per poter accedere alla variabile della classe o membro "vocimenu", abbiamo usato la notazione this.nomevariabile, dove la parola chiave this, fa riferimento proprio al componente stesso. In questo caso si tratterà chiaramente di un membro privato, non accessibile da altre classi.

Ti ricordo che il costruttore di una classe, è quella particolare funzione che viene chiamata subito all'atto del caricamento del componente, quindi tutte le eventuali istruzioni che andrai a inserire all'interno, saranno le prime ad essere eseguite.

Per poter far in modo che nell'elenco delle voci del menu, compaiano proprio i valori appena inseriti manualmente, Link1, Link2 e Link3, dovrò modificare il codice html del file codicemenu.htm, nel modo seguente:

<nav>
 <ul>
  <li><a href="">{{vocimenu[0]}}</a></li>
  <li><a href="">{{vocimenu[1]}}</a></li>
  <li><a href="">{{vocimenu[2]}}</a></li>
 </ul>
</nav>

In questo caso siamo riusciti, dal corpo della classe, quindi dal componente, a passare dei dati da visualizzare nel template, ossia nella vista tramite la notazione delle doppie parentesi graffe {{VALORE_DA_MOSTRARE}}. I dati sono stati inseriti come campo testo di un tag html <a>, ma in Angular 2 è possibile anche andare a impostare dei valori per gli attributi di determinati tag html, come per esempio, l'attributo src di un'immagine.

L'effetto risultante, è che dopo l'esecuzione dell'app, visualizzeremo nella pagina, proprio le voci Link1, Link2, Link3, in quanto in corrispondenza ad ciascuno segnaposto, è stato sostituito il relativo valore presente all'interno dell'array.

Inserire espressioni all'interno di {{ }}

Il valore da mostrare potrebbe essere una variabile, un elemento di un array, oppure un'espressione, come nell'esempio qui sotto.

<button class="btn btn-default" (click)="accendoSpengo()">Pulsante LUCE : {{ isActive ? "ON" : "OFF"}}</button>

Come puoi osservare, all'interno delle parentesi graffe, ho inserito la classica istruzione if then else (operatore ternario), per aggiungere alla stringa di testo "Pulsante LUCE:" il valore "ON" o "OFF" sulla base del valore della variabile membro isActive. In questo caso quindi angular, è in grado di valutare un'espressione interna alle doppie parentesi graffe.

Per capire come collegare un evento alla pressione sul buttone, dovremo aspettare il tutorial sugli gestione degli eventi.

Avrai notato che, nel codice del template precedente, sono ripetuti tre tag <li>. Per un menu, di cui sappiamo il numero massimo di voci da visualizzare, è una situazione abbastanza normale, ma quando avremo la necessità di visualizzare dei dati proveneienti da fonti esterne, quali database, o file JSON, la situazione cambia, in quanto non sappiamo a priori quanti dati verranno restituiti, e come conseguenza, non riusciamo a impostare un layout con N tag ripetuti se non conosciamo quant'è il valore di questo N.

Tutte le volte che abbiamo la necessità di visualizzare nel layout dell'app, un array di dati di dimensione variabile, in Angular si utilizza una notazione che prende il nome di direttiva ngFor.

Tutto questo lo impareremo nel prossimo tutorial guida: "Template e direttiva ngFor"

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.