Angular Formatter

It formats Angular component templates, the HTML you write in .component.html files or in a template string. TypeScript component classes are not handled here; use the TypeScript Formatter for them.

Yes, attributes such as *ngIf, *ngFor, [value], (click) and [(ngModel)] and interpolations such as {{ user.name }} are copied exactly as written. Only the whitespace between elements changes.

When an element contains block level children, such as div, section, article, header, footer, nav, main, form, p, h1 to h6, ul, ol or table, each child goes on its own indented line. Elements without such children stay on one line with runs of whitespace collapsed to single spaces.

Custom elements such as app-root or mat-card are not block level HTML elements, so their content is kept inline unless it contains a block element like div or p. Wrap the content in a block element if you want it expanded.

Not on their own: li is not one of the block level tags, so a ul whose only children are li elements stays on one line. Put block content such as a div inside the items to spread them out.

Inline style blocks are formatted as CSS and inline scripts as JavaScript, indented under their tag. Content of pre and textarea elements is kept exactly as written.

Yes, HTML comments are preserved and placed on their own line inside expanded elements. Their content is copied exactly, so commented out markup stays as it was.

No, it does not compile or check the template, and unclosed tags are formatted as well as possible. Use ng build or your editor's Angular language service to find template errors.

Angular templates are HTML, so the result comes back as a Markdown code block marked html. Copy the lines between the fences into your template file.

Up to 5 MB per run, and larger input is rejected with a message. The output is identical to the Angular option of the Code Formatter.