Angular — Templates

Basic Template

<!-- app.component.html -->
<h1>Hello, {{title}}!</h1>
<p>Welcome to Angular</p>

Interpolation

<h1>{{product.name}}</h1>
<p>{{product.price | currency}}</p>
<p>{{1 + 2}}</p>

Property Binding

<img [src]="imageUrl">
<button [disabled]="isDisabled">Click</button>
<div [class.active]="isActive">Content</div>

Event Binding

<button (click)="onClick()">Click Me</button>
<input (input)="onInput($event)">
<form (submit)="onSubmit()">Submit</form>

Two-Way Binding

<input [(ngModel)]="name">
<p>Hello, {{name}}!</p>

Template Reference Variables

<input #emailInput type="email">
<button (click)="validate(emailInput.value)">Validate</button>

Mini Practice

1. Use interpolation
2. Add property binding
3. Handle events
4. Implement two-way binding

Up Next

Continue with Components — building Angular components.