Angular: Puoi usare SVG come template!
Premetto che di SVG non ci capisco poi tanto, ma quando lessi che su Angular si poteva usare questo formato come template sono rimasto affascinato.
Difatti Angular dalla versione 8 consente di usare direttamente come file per i template, non solo i classici file HTML ma anche dei files SVG!
Giusto per capirci, è 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.
Un progetto d’esempio
Il piccolo esempio sottostante può essere utile per notare come è semplice utilizzare queste possibilità, ad esempio utilizzando più componenti con templates in formato SVG.
Utilizziamo quindi dei componenti per renderizzare un header grafico
(app-logo.component), nel quale nidifichiamo un componente per l’icona (app-icon.component).
È il caso di notare due dettagli in questo caso:
- Nel componente app-icon ho indicato il selector con la attribute sintax (un po’ come facciamo per le direttive), per far si che si possa creare un componente SVG direttamente, ad esempio, su un tag <g> consentendo di nidificare quindi più files grafici.
N.B. Ho provato ad utilizzare un tag <ng-container> ma con scarsi risultati… - Con l’utilizzo di files SVG è molto probabile che il binding dovrete farlo sugli attributi e non sulle proprietà, come ad esempio ho dovuto fare nel caso di [attr.fill]=’…’
Conclusioni
In molte occasioni potrebbe essere molto comodo utilizzare i files SVG, come nel caso di un header grafico o di elementi particolari, facendo però attenzione a tutto l’aspetto di Change Detection (nel nostro caso indicando la strategia onPush), che in questo caso dovrebbe essere particolarmente curato per evitare ad esempio problemi nel caso di eventi async ad alta frequenza (e quindi il povero browser li a morire per il continuo rendering)! :)
Per suggerimenti (o aggiunte perché no!), critiche, insulti, lodi, donazioni di enormi quantità di denaro, partite a padel o consigli non serve altro che scrivere nei commenti!
