---
title: "Standalone components and template control flow"
chapter: "02"
---

# Standalone components and template control flow

Modern Angular applications are standalone by default. A component declares its
own imports and can be lazy-loaded directly.

## Component contract

```ts
@Component({
  selector: 'app-order-row',
  imports: [CurrencyPipe],
  templateUrl: './order-row.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class OrderRow {
  order = input.required<Order>();
  selected = output<string>();
}
```

Inputs are data flowing in. Outputs are semantic events flowing out. Avoid
outputs named `click`; emit business meaning such as `orderOpened`.

## Template syntax

Use property binding for values, event binding for actions, and interpolation
for text. Prefer Angular's built-in `@if`, `@for`, and `@switch` control flow.
Give `@for` a stable track expression derived from identity.

```html
@for (order of orders(); track order.id) {
  <app-order-row [order]="order" (selected)="open($event)" />
} @empty {
  <p>No matching orders.</p>
}
```

## Host and content

Host bindings describe the component's own element. Content projection lets a
parent provide controlled regions. View queries should not become a backdoor
for mutating arbitrary child DOM.

## DOM ownership

Let Angular own rendered DOM. Use template bindings, Renderer2, or post-render
hooks for legitimate integration. Direct DOM mutation can break SSR hydration,
tests, accessibility, and state consistency.

## Smart and focused

Route/feature components coordinate data and user outcomes. Presentational
components render explicit inputs and emit actions. Do not enforce a ceremonial
split when one cohesive component is clearer.

## Feynman check

A component is a small machine with labeled inputs, visible output, and named
events. Explain who owns each piece of state on one real page.