Angular Template e Interpolazione

Le caratteristiche dei template in Angular. 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: 7 giorni fa

Al di là delle funzionalità di un componente Angular, 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, 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...

Ohps... scusami la fastidiosa interruzione, ma per questioni gestionali, tutti i tutorial completi gli ho spostati a questo link: WEBSU. Risulterà più semplice anche per te seguirli e chiedermi dei consigli. Ti aspetto, dai... bastano 5 secondi. Non buttare tutto lo sforzo fatto per arrivare qui.

Hai tempo per leggere? Angular

Non farti scappare il mio libro appena aggiornato: "Angular 100% Operativo". Un corso completo su Angular per imparare rapidamente le tecniche per creare WebAPP e non solo. Prenotalo cliccando l'immagine qui sotto

Categoria: Angular