Format Angular component templates with their structural directives and bindings.
Loading the tool...
How to use Angular Formatter
Paste your code. The formatter engine loads in a moment the first time.
Adjust the options if you need to.
Copy the formatted result.
About Angular Formatter
Angular templates are HTML with extra syntax: structural directives like *ngFor, property and event bindings, pipes and interpolation. A generic HTML formatter often mangles them. This one understands the Angular syntax and formats expressions inside bindings too.
It also supports the newer built-in control flow blocks such as @if and @for.
Frequently asked questions
Does it format the expressions in my bindings?
Yes, expressions inside {{ }} and in property and event bindings are formatted like TypeScript.
Is the new control flow syntax supported?
Yes, @if, @for and @switch blocks are understood by recent versions of the formatter.
Will it break my pipes?
No, pipe syntax is parsed and printed back unchanged apart from spacing.
Why did the first run take a second?
The formatting engine for this language is downloaded the first time you use it, then cached by your browser. After that, formatting is instant and nothing leaves your machine.