Blog

let news: string;

news = '<h1>Titolo articolo</h1>' +

'<p> articolo paragrafo1</p>'+

'<p>articolo paragraf2</p>'+

'<a href ="#">link articolo</a>';

Non trovate che si tratti di un modo un po noioso e macchinoso che può indurre a fare errori? Chi ha già programmato in Js lo sa benissimo!
Pensate se la stringa fosse molto più lunga.

Vediamo invece come si presenta la solita stringa mediante i template literals :

news = `<h1>Titolo dell'articolo</h1>

<p>paragrafo1</p>

<p>paragrafo2</p>

<a href="#">link articolo</a>`;

Come vedete ho utilizzato i simboli ` ` detti in inglese “backticks” rappresentati da un accento grave. Questi mi danno la possibilità di andare  o meno a capo senza utilizzare alcuna concatenazione.

Se utilizzate Windows potete riprodurre tale carattere sfruttando la notazione da tastiera alt + 096 o , se preferite ,potete mappare la tastiera in inglese.
Mentre se utilizzate Mac potete farli mediante i tasti alt+| oppure alt+9.

Template literals in Angular

In Angular i template literals vengono utilizzati per realizzare i template,cioè sezioni html della pagina di un’applicazione nel quale si possono iniettare valori dinamici che provengono dal corpo della classe del componente associato.

Vediamo un esempio per chiarirci le idee:

let book: string;

book = `<h1>{{books.title}}</h1>

<p>{{books.autore}}</p>

<p>{{books.price}}</p>

<a href="">{{books.link}}</a>`;

In questo caso sfrutto la notazione delle doppie parentesi graffe che mi consente di inserire del codice HTML statico associato ad un pezzo di codice dinamico mediante un segnaposto il quale verrà occupato dal valore elaborato all’interno della classe associata.

Template literal con espressione matematica

Vediamo altri esempi di utilizzo del template literal. Aprite il playground di TypeScript e digitate il seguente codice:

const a = `Hello Lucio my age is ${39 + 5}`;//risultato 44
console.log(a);

Come potete vedere ho inserito un’espressione matematica preceduta dal segno $.

In javascript la medesima stringa avrei dovuta scriverla in questo modo:

var a = "Hello Lucio my age is " + (39 + 5);//risultato 44
console.log(a);

cioè utilizzando la concatenazione con il segno + al di fuori dei doppi apici.

Template literal con Url

I template literals risultano essere molto utili e comodi anche nella gestione delle url, ad esempio:

url = `${API}/${ENDPOINT}/${ID}`;