Formateur Angular
Formatez les modèles de composants Angular avec ce formateur Angular. Collez le modèle HTML avec ses directives structurelles, liaisons et interpolations : l’outil place les éléments de bloc tels que div, section, p, ul et table sur leurs propres lignes, avec une indentation de deux espaces, réduit les espaces blancs superflus et formate les blocs script et style en ligne. Les directives, liaisons et expressions restent exactement telles qu’elles ont été écrites, afin que les développeurs Angular obtiennent rapidement des modèles propres.
Foire aux questions
Que puis-je formater avec le formateur Angular ?
Il formate les modèles de composants Angular, le HTML que vous écrivez dans des fichiers .component.html ou dans une chaîne de modèle. Les classes de composants TypeScript ne sont pas prises en charge ici ; utilisez le formateur TypeScript pour celles-ci.
Les directives et les liaisons sont-elles conservées ?
Oui, les attributs tels que *ngIf, *ngFor, [value], (click) et [(ngModel)], ainsi que les interpolations comme {{ user.name }}, sont copiés exactement tels qu’ils ont été écrits. Seuls les espaces blancs entre les éléments changent.
Quels éléments sont placés sur leurs propres lignes ?
Lorsqu’un élément contient des enfants de niveau bloc, comme div, section, article, header, footer, nav, main, form, p, h1 à h6, ul, ol ou table, chaque enfant est placé sur sa propre ligne indentée. Les éléments sans de tels enfants restent sur une seule ligne, avec les séries d’espaces blancs réduites à des espaces simples.
Pourquoi mon composant personnalisé reste-t-il sur une seule ligne ?
Les éléments personnalisés tels que app-root ou mat-card ne sont pas des éléments HTML de niveau bloc ; leur contenu reste donc en ligne, sauf s’il contient un élément de bloc comme div ou p. Encadrez le contenu dans un élément de bloc pour le développer.
Les éléments de liste sont-ils placés sur des lignes distinctes ?
Pas à eux seuls : li ne fait pas partie des balises de niveau bloc, donc un ul dont les seuls enfants sont des éléments li reste sur une seule ligne. Ajoutez du contenu de bloc, comme un div, dans les éléments pour les répartir sur plusieurs lignes.
Que se passe-t-il avec les balises script et style ?
Les blocs style en ligne sont formatés comme CSS et les scripts en ligne comme JavaScript, avec une indentation sous leur balise. Le contenu des éléments pre et textarea est conservé exactement tel qu’il a été écrit.
Les commentaires HTML sont-ils conservés ?
Oui, les commentaires HTML sont conservés et placés sur leur propre ligne dans les éléments développés. Leur contenu est copié tel quel : le balisage commenté reste donc inchangé.
Mon modèle est-il validé ?
Non, l’outil ne compile ni ne vérifie le modèle, et formate les balises non fermées du mieux possible. Utilisez ng build ou le service de langage Angular de votre éditeur pour détecter les erreurs dans le modèle.
Pourquoi la sortie est-elle délimitée comme du html ?
Les modèles Angular sont HTML ; le résultat est donc renvoyé dans un bloc de code Markdown marqué html. Copiez les lignes entre les délimiteurs dans votre fichier de modèle.
Quelle taille peut faire mon modèle ?
Jusqu’à 5 MB par exécution ; les entrées plus volumineuses sont rejetées avec un message. La sortie est identique à l’option Angular du formateur de code.