Angular Formatter Online — Format Angular Templates

Beautify Angular HTML templates with structural directives (*ngFor, *ngIf), property bindings, and event handlers — 100% in your browser, no Prettier install required.

Angular Template Input

Formatted Angular

What is an Angular Formatter?

An Angular formatter rewrites an Angular HTML template — components, structural directives, property bindings, event handlers — with consistent indentation and one element per line. Angular templates are HTML supersets, so the formatter follows ordinary tag-nesting rules while preserving Angular-specific syntax: *ngFor, *ngIf, [prop], (event), [(ngModel)], and template reference variables (#name).

The OpenFormatter Angular tool is a pretty printer — it preserves tag order and attribute values exactly and only adjusts whitespace between elements. It runs entirely in your browser; nothing is uploaded, no account is needed, no rate limits apply.

How to format Angular templates — 4 steps

Paste your Angular template. Drop a component template, an inline template: literal body, or a .html file body into the Input panel. Click Load Sample to try a real *ngFor + *ngIf demo.
Click Format. The formatter indents tags and emits one element per line in your browser.
Review the output. Confirm structural directives sit on their host element and nested components are indented under their parent.
Copy the result. Click Copy to paste back into your .html file, a code review, or a documentation site.

Side-by-side: compact input vs formatted output

Compact Angular

<div class="user-list"><h1>{{ title }}</h1><ul><li *ngFor="let user of users" (click)="select(user)"><span>{{ user.name }}</span></li></ul></div>

Formatted Angular

<div class="user-list">
  <h1>{{ title }}</h1>
  <ul>
    <li *ngFor="let user of users" (click)="select(user)">
      <span>{{ user.name }}</span>
    </li>
  </ul>
</div>

Directive-Aware

Handles *ngFor, *ngIf, *ngSwitch, ng-template, ng-container, and ng-content with their Angular-specific microsyntax preserved.

Bindings Preserved

Property bindings [prop], event handlers (event), two-way [(ngModel)], and host bindings [class.x] are kept exactly as written.

Browser-Only

Templates run through JavaScript on your machine. Component selectors, route paths, and feature flags never leave the device.

Common use cases

check_circleFormat an Angular template copied from a Stack Overflow answer or GitHub issue
check_circleBeautify a one-line template extracted from an inline @Component({ template: `...` })
check_circleReformat an Angular Material template with deeply nested mat-* components
check_circleClean up an auto-generated template from ng generate component before committing
check_circleIndent a template that has been minified during a build pipeline accident
check_circleFormat a template for a code-review screenshot or tech blog post
check_circleBeautify an Angular template before pasting into a Storybook story
check_circleReformat a third-party Angular component template you want to fork or audit

Angular formatter vs Prettier vs Angular ESLint

A pretty printer is the lightweight option — it preserves tag order and attribute values, and only adjusts whitespace between elements. Prettier with prettier-plugin-organize-attributes goes further: it parses the template into the Angular compiler AST and re-prints it with attribute wrapping, quote normalisation, and configurable indentation. @angular-eslint/template-eslint-plugin is a different tool entirely — it lints templates against accessibility and Angular-style rules (no-call-expression, no-any, click-events-have-key-events) and can autofix some. Use this online tool for a one-off readability pass; use Prettier for project-wide enforcement; use Angular ESLint for template correctness.

More than Angular formatting

Format Vue, beautify TypeScript, or pretty-print JavaScript — all browser-side, all free.

Vue Formatter TypeScript Formatter HTML Formatter

Frequently Asked Questions

What does Prettier do for Angular templates?

Prettier with the Angular plugin parses an Angular template into the AST emitted by @angular/compiler and re-prints it with consistent indentation, attribute wrapping, and quote style. This pretty printer is lighter — it does string-based tag indentation only, which is enough for a quick readability pass on a template copied from DevTools or a Stack Overflow answer. For project-wide enforcement, install Prettier with --plugin=prettier-plugin-organize-attributes.

How are structural directives like ngFor and ngIf handled?

Structural directives are attribute-form syntactic sugar that Angular desugars into <ng-template>. The formatter treats *ngFor and *ngIf as ordinary attributes — they stay on the host element with their full microsyntax (let item of items; trackBy: trackById; let i = index) on a single line. The element they decorate is indented under its parent; the directive itself is not turned into a separate template wrapper.

Does it preserve property bindings and event handlers?

Yes. [prop]="value" property bindings, (event)="handler($event)" event bindings, [(ngModel)]="x" two-way bindings, and [class.active]="cond" / [style.color]="c" host bindings are kept verbatim with their square-bracket and parenthesis syntax. The formatter never rewrites attribute values — it only normalises whitespace between tags and indentation around them.

How does it handle ng-template, ng-container, and ng-content?

These are first-class Angular elements and indent the same way as a div or section. <ng-template> blocks referenced by template variables (#empty, #loading) are emitted on their own indented lines; <ng-container *ngIf="..."> groups without rendering an extra DOM node and indents normally; <ng-content select="..."> projects content in a component template and indents under the host.

Will this format my Angular component TypeScript file?

No. This tool focuses on the template (the inline or external template/templateUrl HTML). To format the @Component decorator class with TypeScript-aware indentation, use the TypeScript Formatter instead — it handles decorators, generic type parameters, dependency injection in constructors, and lifecycle hooks (ngOnInit, ngOnDestroy, OnChanges).

Does it handle inline templates inside @Component({ template: `...` })?

For a component file, copy only the template literal contents (between the backticks of template:) into the formatter. Pasting the whole .ts file would reformat the TypeScript surrounding the template too, which is not what you want — Angular templates and TypeScript have different brace and quote rules.

Is the Angular code I paste sent to your servers?

No. Formatting runs entirely in your browser using JavaScript. Templates containing API endpoints, internal route paths, feature-flag names, or proprietary component selectors never leave your device. Open DevTools → Network and click Format to verify no requests are made.

How is this different from the Angular CLI ng format?

The Angular CLI does not ship a built-in formatter — there is no ng format command. Teams typically use Prettier with prettier-plugin-organize-imports and a pre-commit hook (Husky + lint-staged) for project-wide enforcement. This online tool is a fast alternative for one-off formatting when you do not have a configured Angular project on hand.