Elements with no content and either no attributes or a single attribute should be on one line:
<custom-element></custom-element>
<button class="primary"></button>Elements with content but no attributes, or with a single attribute, should be on one line:
<span>Short text</span>
<br>Always keep element and its single attribute on the same line:
<div class="container"></div>
<button (click)="onClick()"></button>
<input type="text">When an element has multiple attributes AND content:
- Opening tag on its own line
- Attributes indented with 4 spaces/2 indents
- Each attribute on its own line
- Content indented with 2 spaces/1 indent
- Closing tag aligned with opening tag
<div
class="container"
[attr]="value"
(click)="onClick()">
Some content here
</div>When an element has multiple attributes but NO content:
- Opening tag on its own line
- Attributes indented with 2 spaces/1 indent
- Each attribute on its own line
- Closing tag on new line, aligned with opening tag
<app-header
class="main-header"
[title]="pageTitle"
(menuClick)="onMenuClick()">
</app-header>Comments should be preserved exactly as written in source:
<!-- This comment stays exactly as is -->
<!--
Multi-line comments
preserve their
formatting
-->Control flow blocks should be properly indented:
@if (condition) {
<div>Content</div>
} @else if (otherCondition) {
<div>Other content</div>
} @else {
<div>Default content</div>
}
@for (item of items) {
<div>{{ item }}</div>
}Interpolation should have consistent spacing:
<div>{{ value }}</div>
<span>Prefix {{ value }} suffix</span>Each nesting level adds 2 spaces of indentation(double indents):
<div class="parent">
<div
class="child"
[attr]="value">
<span>Content</span>
</div>
</div>Self-closing tags should remain self-closing and on one line:
<input type="text">
<input
type="text"
name="email">
<br>