Szablony i wiązanie danych

Szablony umożliwiają wyświetlanie dynamicznych treści w Angularze. W tej lekcji poznają Państwo działanie szablonów i wiązania danych.

Czym jest szablon?

Szablon to kod HTML, którego Angular używa do renderowania widoku komponentu. Łączy kod HTML ze składnią właściwą dla Angulara, aby wyświetlać dane.

Interpolacja

Interpolacja umożliwia wstawianie wartości z komponentu do kodu HTML. Aby wyświetlić dane, należy użyć podwójnych nawiasów klamrowych:

{{ data }}

{{ username }}

Wiązanie właściwości

Wiązanie właściwości umożliwia dynamiczne ustawianie właściwości elementów HTML:

[src] = "imageUrl"

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

Wiązanie zdarzeń

Wiązanie zdarzeń pozwala aplikacji reagować na działania użytkownika:

(click)="onClick()"

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

Wiązanie dwukierunkowe

Wiązanie dwukierunkowe synchronizuje interfejs użytkownika z danymi. Należy użyć [(ngModel)]:

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

Dyrektywy strukturalne

Dyrektywy strukturalne modyfikują układ DOM. Przykładami są *ngIf i *ngFor.

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

Używanie ngFor

*ngFor iteruje po danych i wielokrotnie wyświetla elementy:

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

Podsumowanie

Poznali Państwo sposób używania szablonów i wiązania danych do tworzenia dynamicznych widoków Angulara!