Formatador de Angular
Formate modelos de componentes Angular com este formatador Angular. Cole o HTML do modelo com diretivas estruturais, bindings e interpolação, e a ferramenta coloca elementos de bloco, como div, section, p, ul e table, em linhas próprias com indentação de dois espaços, remove espaços em branco excedentes e formata blocos inline de script e style. Diretivas, bindings e expressões permanecem exatamente como foram escritos, para que desenvolvedores Angular obtenham modelos limpos rapidamente.
Perguntas frequentes
O que posso formatar com o formatador Angular?
Ele formata modelos de componentes Angular, o HTML que você escreve em arquivos .component.html ou em uma string de modelo. Classes de componentes TypeScript não são tratadas aqui; use o formatador TypeScript para elas.
As diretivas e os bindings são preservados?
Sim, atributos como *ngIf, *ngFor, [value], (click) e [(ngModel)] e interpolações como {{ user.name }} são copiados exatamente como foram escritos. Apenas os espaços em branco entre os elementos mudam.
Quais elementos ficam em linhas próprias?
Quando um elemento contém filhos de nível de bloco, como div, section, article, header, footer, nav, main, form, p, h1 a h6, ul, ol ou table, cada filho fica em uma linha própria com indentação. Elementos sem esses filhos permanecem em uma única linha, e sequências de espaços em branco são reduzidas a espaços simples.
Por que meu componente personalizado permanece em uma única linha?
Elementos personalizados, como app-root ou mat-card, não são elementos HTML de nível de bloco, então o conteúdo deles permanece em linha, a menos que contenha um elemento de bloco como div ou p. Envolva o conteúdo em um elemento de bloco se quiser expandi-lo.
Os itens da lista ficam em linhas separadas?
Não por conta própria: li não é uma das tags de nível de bloco, então um ul cujos únicos filhos são elementos li permanece em uma única linha. Coloque conteúdo de bloco, como uma div, dentro dos itens para distribuí-los em várias linhas.
O que acontece com as tags script e style?
Blocos style inline são formatados como CSS e scripts inline como JavaScript, com indentação abaixo da respectiva tag. O conteúdo de elementos pre e textarea é mantido exatamente como foi escrito.
Os comentários HTML são mantidos?
Sim, os comentários HTML são preservados e colocados em linhas próprias dentro de elementos expandidos. O conteúdo é copiado exatamente, então a marcação comentada permanece como estava.
A ferramenta valida meu modelo?
Não. Ela não compila nem verifica o modelo, e também formata da melhor maneira possível tags que não foram fechadas. Use ng build ou o serviço de linguagem Angular do seu editor para encontrar erros no modelo.
Por que a saída aparece entre cercas identificadas como html?
Modelos Angular são HTML, então o resultado é retornado como um bloco de código Markdown identificado como html. Copie as linhas entre as cercas para o arquivo do modelo.
Qual pode ser o tamanho do meu modelo?
Até 5 MB por execução; entradas maiores são rejeitadas com uma mensagem. A saída é idêntica à opção Angular do Code Formatter.