Шаблоны и привязка данных

Шаблоны позволяют отображать динамическое содержимое в Angular. В этом уроке Вы узнаете, как работают шаблоны и привязка данных.

Что такое шаблон?

Шаблон — это HTML-код, который Angular использует для отображения представления компонента. Он объединяет HTML со специальным синтаксисом Angular для отображения данных.

Интерполяция

Интерполяция позволяет вставлять значения из компонента в HTML-код. Используйте двойные фигурные скобки для отображения данных:

{{ data }}

{{ username }}

Привязка свойств

Привязка свойств позволяет динамически задавать свойства элементов HTML:

[src] = "imageUrl"

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

Привязка событий

Привязка событий позволяет приложению реагировать на действия пользователя:

(click)="onClick()"

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

Двусторонняя привязка

Двусторонняя привязка синхронизирует пользовательский интерфейс и данные. Используйте [(ngModel)]:

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

Структурные директивы

Структурные директивы изменяют структуру DOM. Примеры таких директив — *ngIf и *ngFor.

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

Использование ngFor

*ngFor перебирает данные и многократно отображает элементы:

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

Итоги

Вы научились использовать шаблоны и привязку данных для создания динамических представлений Angular!