Templates and Data Binding

Templates let you display dynamic content in Angular. This lesson explores how templates and data binding work.

What is a Template?

A template is HTML that Angular uses to render a component's view. It combines HTML with Angular-specific syntax to display data.

Interpolation

Interpolation allows you to insert values from your component into the HTML. Use double curly braces to show data:

{{ data }}

{{ username }}

Property Binding

Property binding lets you set properties of HTML elements dynamically:

[src] = "imageUrl"

<img [src]="user.profilePicture">

Event Binding

Event binding allows your application to respond to user actions:

(click)="onClick()"

<button (click)="showAlert()">Click me</button>

Two-Way Binding

Two-way binding keeps your UI and data synchronized. Use [(ngModel)]:

<input [(ngModel)]="user.name">

Structural Directives

Structural directives modify DOM layout. Examples include *ngIf and *ngFor.

<div *ngIf="isVisible">Visible Content</div>

Using ngFor

*ngFor loops over data and displays elements repeatedly:

<li *ngFor="let item of items">{{ item }}</li>

Summary

You've learned how to use templates and data binding to create dynamic Angular views!