Formateador de Angular
Dé formato a las plantillas de componentes Angular con este formateador de Angular. Pegue el HTML de la plantilla con directivas estructurales, enlaces e interpolaciones; la herramienta coloca elementos de bloque como div, section, p, ul y table en líneas propias con una sangría de dos espacios, elimina los espacios en blanco sobrantes y da formato a los bloques de script y style en línea. Las directivas, los enlaces y las expresiones se conservan exactamente como están escritos para que los desarrolladores de Angular obtengan rápidamente plantillas limpias.
Preguntas frecuentes
¿A qué puedo dar formato con el formateador de Angular?
Da formato a las plantillas de componentes Angular, el HTML que escribe en archivos .component.html o en una cadena de plantilla. Las clases de componentes TypeScript no se procesan aquí; use el formateador de TypeScript para darles formato.
¿Se conservan las directivas y los enlaces?
Sí, los atributos como *ngIf, *ngFor, [value], (click) y [(ngModel)] y las interpolaciones como {{ user.name }} se copian exactamente como están escritos. Solo cambia el espacio en blanco entre los elementos.
¿Qué elementos ocupan líneas propias?
Cuando un elemento contiene elementos secundarios de nivel de bloque, como div, section, article, header, footer, nav, main, form, p, h1 to h6, ul, ol o table, cada uno ocupa su propia línea con sangría. Los elementos sin esos elementos secundarios se mantienen en una sola línea y las secuencias de espacios en blanco se reducen a espacios individuales.
¿Por qué mi componente personalizado permanece en una sola línea?
Los elementos personalizados como app-root o mat-card no son elementos HTML de nivel de bloque, por lo que su contenido se mantiene en línea salvo que incluya un elemento de bloque como div o p. Envuélvalo en un elemento de bloque si quiere expandirlo.
¿Los elementos de lista se colocan en líneas separadas?
No por sí solos: li no es una de las etiquetas de nivel de bloque, así que un ul cuyos únicos elementos secundarios son elementos li permanece en una sola línea. Añada contenido de bloque, como un div dentro de los elementos, para distribuirlos en varias líneas.
¿Qué ocurre con las etiquetas script y style?
Los bloques style en línea se formatean como CSS y los scripts en línea como JavaScript, con sangría bajo su etiqueta. El contenido de los elementos pre y textarea se conserva exactamente como está escrito.
¿Se conservan los comentarios HTML?
Sí, los comentarios HTML se conservan y se colocan en líneas propias dentro de los elementos expandidos. Su contenido se copia exactamente, por lo que el marcado comentado permanece tal como estaba.
¿Valida mi plantilla?
No, no compila ni comprueba la plantilla, y los resultados con etiquetas sin cerrar son tan buenos como sea posible. Use ng build o el servicio de lenguaje Angular de su editor para encontrar errores en la plantilla.
¿Por qué el resultado está delimitado como html?
Las plantillas Angular son HTML, por lo que el resultado se devuelve como un bloque de código Markdown marcado como html. Copie las líneas entre las cercas en su archivo de plantilla.
¿Qué tamaño puede tener mi plantilla?
Hasta 5 MB por ejecución; las entradas mayores se rechazan con un mensaje. El resultado es idéntico a la opción Angular del Formateador de código.