Angular Template Formatter

An Angular formatter for component templates

This Angular formatter runs Prettier with its angular parser, which understands Angular's template language on top of HTML. A generic HTML formatter treats (click)="save(item); $event.stopPropagation()" as an opaque attribute string. The Angular parser reads it as an expression, so it can add consistent spacing inside bindings, format pipes, and lay out the built-in control flow blocks introduced in Angular 17.

Example

@if(user.isLoggedIn){<p>Welcome, {{user.name|titlecase}}</p>}@else{<button (click)="login()">Sign in</button>}
<li *ngFor="let p of products;let i=index" [ngClass]="{selected:p.id===selectedId}">{{i+1}}. {{p.title}}</li>

@if (user.isLoggedIn) {
  <p>Welcome, {{ user.name | titlecase }}</p>
} @else {
  <button (click)="login()">Sign in</button>
}
<li
  *ngFor="let p of products; let i = index"
  [ngClass]="{ selected: p.id === selectedId }"
>
  {{ i + 1 }}. {{ p.title }}
</li>

Interpolations get a space inside the braces ({{ value }}), the pipe gets spaces on both sides, the *ngFor micro-syntax is normalized, and the object literal passed to [ngClass] is formatted like JavaScript.

What the Angular parser understands

• Bindings: property [value], event (input), two-way [(ngModel)], attribute [attr.aria-label], class and style bindings.
• Structural directives: *ngIf with else templates, *ngFor with trackBy, *ngSwitchCase.
• Control flow blocks: @if, @else if, @for (item of items; track item.id), @switch, @defer and @empty.
• Pipes with arguments, such as {{ price | currency:'EUR':'symbol' }}.
• Template reference variables (#form="ngForm") and ng-template / ng-container.

Options

Indent sets the indentation of nested elements and control flow blocks. The Angular CLI generates projects with an .editorconfig that uses 2 spaces. Line width (80 by default) decides when an element's attributes are split one per line. Angular templates tend to have many bindings per element, so a width of 100–120 often gives more compact output.

Whitespace handling

Prettier uses CSS display rules to decide where whitespace is significant. Inline elements like <span> and <a> keep their surrounding spaces because removing them would change the rendered text. That is why the output sometimes places a closing > at the start of the next line: it is the only way to break the line without adding visible space. The effect is intentional and the rendered page looks the same.

Common template errors

• Unclosed block: an @if { ... } missing its closing brace, or a stray } in text. Inside templates, a literal brace must be written as {{ '{' }} or the HTML entity {.
• Invalid binding expression: Angular expressions do not allow assignments with = in property bindings, new, or bitwise operators. The parser reports these as errors.
• Unterminated quote in an attribute usually comes from mixing " inside a double-quoted binding. Use single quotes for strings inside bindings.

Using the same setup in your project

Prettier does not guess the Angular parser from a .html extension, because an Angular template is also valid HTML. In a repository you tell it explicitly with an override in .prettierrc: files matching *.component.html (or all .html files under src/app) get "parser": "angular". This page applies that parser for you, so pasting a template here shows exactly what the CLI would produce with the same indent and width.

Formatting the rest of the component

An Angular component also has a TypeScript class and a stylesheet. Format the class with the TypeScript Formatter and SCSS styles with the SCSS Formatter; both use Prettier, so the style matches. For plain HTML without Angular syntax, the HTML Pretty Print tool uses the same engine. Everything is processed in your browser.