Templates — HTML With Superpowers

An Angular template is HTML extended with bindings, directives, and control flow that all stay in sync with your component state.

4 min read Level 2/5 #angular#templates

What you'll learn

Interpolate values with double-brace syntax
Bind to DOM properties
Conditionally render with @if

If you can write HTML, you can write Angular templates. Angular adds a few syntaxes on top: interpolation, bindings, and control flow blocks that read like the rest of your markup.

Interpolation

Use double braces to drop an expression into text:

<p>You have {{ count() }} notifications.</p>
<p>Welcome back, {{ user.name.toUpperCase() }}!</p>

Whatever the expression evaluates to is stringified and inserted. When the underlying state changes, the text updates automatically.

Property Binding

Square brackets bind a DOM property to an expression:

<button [disabled]="!ready()">Submit</button>
<img [src]="avatarUrl()" [alt]="user().name" />

Without the brackets you’d get the literal string. With them, Angular evaluates the right side and assigns it to the DOM property each time the value changes.

Conditional Rendering with @if

The modern Angular control-flow blocks read like regular JS:

@if (loggedIn()) {
  <p>Welcome back!</p>
} @else {
  <p>Please sign in.</p>
}

You can nest @if inside @for, mix in @switch, and the compiler will optimize the DOM updates for you. There is no *ngIf in new code — this is the default.

Inline vs External Template

Inline templates use backticks; external templates use templateUrl:

@Component({
  templateUrl: './user-card.component.html',
})
export class UserCardComponent { /* ... */ }

Use inline for tiny components, external once you cross ~15 lines of markup. Editor support is the same either way.

NgModule vs Standalone →