Templates and Data Binding

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

{{ data }}

{{ username }}

Property binding lets you set properties of HTML elements dynamically:

[src] = "imageUrl"

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

Event binding allows your application to respond to user actions:

(click)="onClick()"

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

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

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

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

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

*ngFor loops over data and displays elements repeatedly:

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

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