Templates

Lesson content

What is an Angular Template? An Angular template is HTML that defines what a component displays in the browser. Angular templates extend normal HTML with features such as data binding, event handling, control flow, pipes, variables, and reusable components. Basic Template Example import { Component } from '@angular/core'; @Component({ selector: 'app-user', standalone: true, template: ` <h2>{{ name }}</h2> <button (click)="changeName()"> Change Name </button> ` }) export class UserComponent { name = 'Ajay'; changeName() { this.name = 'Angular Developer'; } } Template Flow Component Data ↓ Template Binding ↓ Rendered HTML ↓ User Action ↓ Component Method ↓ Template Updates Types of Templates 1. Inline Template The template is written directly inside the component metadata. @Component({ selector: 'app-home', standalone: true, template: ` <h1>Home Page</h1> ` }) export class HomeComponent {} 2. External Template The template is stored in a separate HTML file. @Component({ selector: 'app-home', standalone: true, templateUrl: './home.component.html' }) export class HomeComponent {} home.component.html <h1>Home Page</h1> Common Template Features 1. Interpolation Interpolation displays component data inside the template. <h2>{{ username }}</h2> username = 'Ajay'; 2. Property Binding Property binding sends a value from the component to an HTML element, directive, or child component. <button [disabled]="isDisabled"> Save </button> isDisabled = true; 3. Event Binding Event binding calls a component method when a user action occurs. <button (click)="saveUser()"> Save </button> saveUser() { console.log('User saved'); } 4. Two-Way Binding Two-way binding keeps the component value and form control synchronized. import { FormsModule } from '@angular/forms'; @Component({ selector: 'app-profile', standalone: true, imports: [FormsModule], template: ` <input [(ngModel)]="username" /> <p>{{ username }}</p> ` }) export class ProfileComponent { username = ''; } The [()] syntax combines property binding and event binding. Modern Angular Control Flow @if @if (isLoggedIn) { <p>Welcome, {{ username }}</p> } @else { <p>Please log in</p> } @for @for (product of products; track product.id) { <p>{{ product.name }}</p> } @empty { <p>No products found</p> } The track expression helps Angular reuse DOM elements efficiently. @switch @switch (status) { @case ('active') { <p>Account Active</p> } @case ('blocked') { <p>Account Blocked</p> } @default { <p>Unknown Status</p> } } Template Variables A template reference variable provides access to an HTML element, directive, or component instance. <input #emailInput /> <button (click)="showEmail(emailInput.value)"> Show Email </button> showEmail(email: string) { console.log(email); } Signals in Templates Signal values are read by calling them like functions. import { Component, signal } from '@angular/core'; @Component({ selector: 'app-counter', standalone: true, template: ` <p>Count: {{ count() }}</p> <button (click)="increment()"> Increment </button> ` }) export class CounterComponent { count = signal(0); increment() { this.count.update(value => value + 1); } } Class and Style Binding Class Binding <p [class.active]="isActive"> User Status </p> Style Binding <p [style.color]="textColor"> Angular Template </p> Attribute Binding Use attribute binding when an HTML attribute does not have a matching DOM property. <button [attr.aria-label]="buttonLabel"> Save </button> Pipes in Templates Pipes transform values before displaying them. <p>{{ username | uppercase }}</p> <p>{{ price | currency }}</p> <p>{{ createdAt | date }}</p> Using Child Components <app-product-card [product]="selectedProduct" (buy)="purchaseProduct($event)"> </app-product-card> Important Template Rules Keep complex business logic out of templates Use simple expressions Use signals, computed values, or component methods carefully Use track inside @for Prefer modern control flow for new Angular applications Do not use <script> elements inside Angular templates Keep templates readable and accessible Template vs Component Template Component Class Defines the user interface Contains data and behaviour Uses HTML and Angular syntax Uses TypeScript Displays component values Provides values to the template Handles user events through bindings Contains event-handler methods Key Point Template = HTML + Angular Binding + Control Flow + Events. Easy Formula Component Data ↓ Template ↓ Rendered UI ↓ User Event ↓ Component Method ↓ Updated UI