CodesBeautify

Angular Formatter

Clean up an Angular component template so directives, property bindings and interpolations line up the way the Angular style guide expects.

Angular template
Formatted template
Runs locally in your browser

About the Angular Formatter

An Angular template is HTML plus a small expression language, and ordinary HTML formatters mangle it. Attribute names contain brackets and parentheses such as [disabled], (click) and [(ngModel)], and the values are Angular expressions rather than plain strings. This tool runs the same Angular parser that the prettier project ships, so those attributes are recognised and their expressions are pretty printed instead of being treated as opaque text.

Interpolations get one space inside the braces, pipes get a space either side of the bar, and structural directives such as *ngFor="let row of rows; trackBy: trackById" are kept on the element they belong to. Elements longer than the line width you choose are broken so that one attribute sits on each line, with the closing angle bracket following the last attribute.

Set Max line width to match the print width in your project so the output matches what your editor would produce on save. Two spaces is the Angular CLI default indentation and is preselected here.

This page formats the template only. For the TypeScript half of a component use the TypeScript Formatter, and for a plain HTML fragment with no Angular syntax the HTML Formatter is a better fit.

How to use

  1. Copy the contents of a .component.html file into the left pane, or press Sample to see a template with *ngFor and *ngIf.
  2. Set Max line width to the value your team uses so long elements wrap in the same place.
  3. Read the formatted template on the right. An amber message names the line and column if a tag is left unclosed.
  4. Press Download to save the result straight back over your component template.

Common questions

Can I paste a whole component including the TypeScript class?
No. Paste only the template markup. A component file with a decorator and a class will fail to parse because the parser expects HTML at the top level.
Does it understand inline templates written in a template literal?
Strip the backticks and the decorator wrapper first, format the markup here, then paste it back. The parser needs the template on its own.
Why did my self closing custom element gain a closing tag?
HTML only allows self closing syntax on void elements. Angular accepts it in templates, and the formatter keeps the form you used for known Angular components, but unknown elements are normalised to the HTML rule.
Are control flow blocks such as @if and @for supported?
The parser bundled here handles the classic structural directives reliably. Newer block syntax may be passed through unchanged rather than reformatted, so check the output if your project uses it.