Ho sempre sottovalutato l’utilizzo di alcuni tag in Angular, come ad esempio <ng-container>, <ng-template> e le variabili template, quelle che si inizializzano all’interno dei file HTML con #nomeVariabile.
Per non parlare poi delle direttive strutturali, abituati ad usare i soliti *ngIf e *ngFor, a volte si tende a dimenticare tutte le altre che possono essere molto comode, soprattutto per mantenere il codice HTML pulito e ordinato.
Contenuti dell'articolo
Structural directive
I due elementi chiavi delle direttive strutturali sono ng-container e ng-template, che vengono usate da angular per tutte le altre direttive strutturali, ad esempio, quando si scrive *ngIf, Angular non fa altro che piazzare in ng-template prima del tag e metterci un attributo input [ngIf].
La differenza principale tra il container e il template è quella che il primo, <ng-container>, non è un vero e proprio elemento del DOM, quindi non interferisci con la struttura e lo stile della pagina. Per quanto tempo ho incasinato con mille span e ngIf i template, quando bastava un semplice ng-container per raggruppare tutto ed evitare di impattare sull’HTML e sul CSS.
https://angular.io/guide/structural-directives#the-ng-template
NgSwitch, si esiste…
Poi, quanti ngIf sprecati, con sempre gli stessi controlli, nonostante esiste in NgSwitch e NgSwitchCase? Si! Esiste, ed è una figata! E pensare che viene spiegato proprio all’inizio della documentazione…
https://angular.io/guide/structural-directives#what-are-structural-directives
Scope delle variabili nel template
I container e i template sono utilissimi anche per delimitare lo scope delle variabile #nomeVariabile definite nei tag.
Ad esempio, mi è capitato spesso di dover definire dei campi di un form attraverso un ngFor, come le chiamiamo le variabili di quello stesso campo che viene replicato sempre allo stesso modo? La prima cosa che mi viene in mente di fare è concatenare l’indice al nome della variabile… ma non si può fare, quindi come fare a distinguerle per potervi accedere su altri tag, come ad esempio i messaggi di validazione?
Semplice, basta aggiungere un ng-container e si va a limitare lo scope di quelle variabili, in questo modo rimangono univoche per tutti i tag e gli utilizzi che se ne fa all’interno del container, certo fuori dal container non esisteranno quelle variabili, ma questo è un’altra problema…
Anche l’ngIf va a delimitare uno scope, come anche ng-template, ma diciamo che poi in base alle esigenze se ne può usare uno piuttosto che un altro.
https://angular.io/guide/template-reference-variables#template-variable-scope
