Formatter Angular
Formattate i template dei componenti Angular con questo Formatter Angular. Incollate il HTML del template con direttive strutturali, binding e interpolazioni: lo strumento dispone gli elementi di blocco come div, section, p, ul e table su righe separate con un rientro di due spazi, comprime gli spazi bianchi superflui e formatta i blocchi inline di script e style. Direttive, binding ed espressioni restano esattamente come sono, così gli sviluppatori Angular ottengono rapidamente template ordinati.
Domande frequenti
Cosa posso formattare con il Formatter Angular?
Formatta i template dei componenti Angular, il HTML che scrivete nei file .component.html o in una stringa di template. Le classi dei componenti TypeScript non vengono gestite qui; per quelle usate il Formatter TypeScript.
Le direttive e i binding vengono mantenuti?
Sì, attributi come *ngIf, *ngFor, [value], (click) e [(ngModel)] e interpolazioni come {{ user.name }} vengono copiati esattamente così come sono. Cambiano solo gli spazi bianchi tra gli elementi.
Quali elementi vengono disposti su righe separate?
Quando un elemento contiene elementi figli di livello blocco, come div, section, article, header, footer, nav, main, form, p, da h1 a h6, ul, ol o table, ogni elemento figlio va su una riga separata con rientro. Gli elementi senza tali figli restano su una sola riga e le sequenze di spazi bianchi vengono ridotte a spazi singoli.
Perché il mio componente personalizzato resta su una sola riga?
Gli elementi personalizzati come app-root o mat-card non sono elementi HTML di livello blocco, quindi il loro contenuto resta in linea a meno che non contenga un elemento di blocco come div o p. Racchiudete il contenuto in un elemento di blocco per espanderlo.
Gli elementi degli elenchi vengono disposti su righe separate?
Non da soli: li non è uno dei tag di livello blocco, quindi un ul i cui unici elementi figli sono elementi li resta su una sola riga. Inserite contenuti di blocco, come un div, negli elementi per disporli su più righe.
Cosa succede con i tag script e style?
I blocchi style inline vengono formattati come CSS e gli script inline come JavaScript, con rientro sotto il rispettivo tag. Il contenuto degli elementi pre e textarea viene mantenuto esattamente così come è.
I commenti HTML vengono mantenuti?
Sì, i commenti HTML vengono mantenuti e disposti su righe separate all’interno degli elementi espansi. Il loro contenuto viene copiato esattamente, quindi il markup commentato resta com’era.
Lo strumento convalida il mio template?
No, non compila né controlla il template e formatta i tag non chiusi nel miglior modo possibile. Usate ng build o il servizio linguistico Angular del vostro editor per trovare gli errori nel template.
Perché l’output è racchiuso tra delimitatori come html?
I template Angular sono HTML, quindi il risultato viene restituito come blocco di codice Markdown contrassegnato come html. Copiate le righe tra i delimitatori nel file del template.
Quanto può essere grande il mio template?
Fino a 5 MB per esecuzione; gli input più grandi vengono rifiutati con un messaggio. L’output è identico all’opzione Angular del Code Formatter.