Angular: Puoi usare SVG come template!

Angular 8 consente di usare direttamente come file per i template, non solo i classici file HTML ma anche dei file SVG. È quindi possibile indicare direttamente un file SVG nella chiave templateUrl del decoratore Component.

In questo caso, nel momento in cui Angular andrà ad eseguire il rendering del componente, verrà disegnato a video il contenuto del file grafico SVG.

La cosa interessante è che in ogni modo il template sarà comunemente utilizzabile come qualunque template e sarà quindi possibile:

passare comunemente Input dall’esterno del componente per consentire la component communication;
eseguire il binding all’interno del markup, consentendo quindi di avere un comportamento dinamico dell’SVG;
utilizzare la chiave styles/styleUrls del decoratore Component per applicare stili al markup del file SVG.

In quest'articolo vedremo come è semplice utilizzare queste possibilità, ad esempio utilizzando più componenti con templates in formato SVG.

Autore

Francesco Sciuti

CEO @Acadevmy, Google Developer Expert (GDE), Microsoft MVP, Google Certified Developer, Projects Manager, Software Engineer, Speaker/Evangelist/Trainer, AWS User Group CT Lead

Programmatore con numerosi anni di esperienza nel mondo enterprise, fortemente orientato allo sviluppo web (frontend e backend) ed al project management.

Da sempre e per sempre appassionato di tecnologia e dello mondo della programmazione, in continua evoluzione ed aggiornamento su tutto ciò che è innovazione. Focalizzato sul miglioramento professionale e tecnologico continuo: libri, corsi, articoli, forum e frequentatore regolare di eventi tecnologici in è possibile incontrare persone nuove ed interessanti con le quali scambiare il più possibile idee e conoscenze tecniche.

Amante della comunicazione e con forte propensione per la condivisione del sapere partecipa come workshop/talk speaker ed organizzatore di eventi IT in Sicilia ed in Italia. Partecipa attivamente inoltre a molte comunità italiane (Angular, React, Javascript, GDG, PUG, ecc ...) e contribuisce come lead mentor della Fondazione CoderDojo.

Lavora per molti anni prima come dipendente e poi come freelance, sino a cogliere una nuova sfida fondando Acadevmy - Software Factory & Learning con i propri soci/amici Salvo Pappalardo ed Andrea Ortis.

Ama leggere fumetti (rigorosamente di Batman), suonare la batteria, girare in moto, giocare a padel e passare tanto tempo con la sua amatissima famiglia.