Angular Formatter

Format Angular templates and component classes.

0 chars
0 words
0 lines
0 chars
0 words
0 lines

Angular Formatter – Templates and Components

Angular code lives in two places: HTML templates full of bindings and directives, and TypeScript classes with decorators. The Angular formatter handles both. Switch between Template (HTML) and Component (TS) mode and Prettier formats the code with Angular-aware parsers.

Template mode

Prettier's Angular parser understands the template syntax that a normal HTML formatter would mangle:

  • Structural directives like *ngIf, *ngFor with trackBy, and ng-template references.
  • The built-in control flow blocks @if, @for, @switch, and @defer.
  • Property [value], event (click), and two-way [(ngModel)] bindings.
  • Interpolations with pipes: {{a|json}} becomes {{ a | json }}.
  • Long attribute lists are split onto separate lines.

The Keep > on last attribute line option matches Prettier's bracketSameLine setting for teams that prefer the closing bracket next to the last attribute.

Component mode

Paste a component, service, module, guard, or pipe. Decorators such as @Component, @Input(), and @HostListener are formatted along with the class body, constructor injection, and RxJS pipelines. Single quotes are enabled by default because the Angular CLI style guide uses them.

Why Prettier for Angular?

Angular projects increasingly ship with Prettier configured next to ESLint. Using the same engine here means a snippet formatted online matches what ng lint --fix or your editor's format-on-save produces, with no surprises in your next diff.

For templates without Angular syntax, the HTML Beautifier works too. Component styles can be cleaned up with the SCSS Beautifier or CSS Beautifier, and plain services with the TypeScript Beautifier.

Frequently Asked Questions

Yes. Prettier's Angular parser supports the built-in control flow blocks introduced in Angular 17 as well as the older *ngIf and *ngFor directives.

Prettier formats the expressions inside interpolations and normalizes them to {{ expression | pipe }} with spaces, which is the Angular style guide convention.

Use Component (TS) mode to format the class and decorator. The inline template string is kept as written; paste its content into Template mode to format the markup itself.