Modelos e vinculação de dados

Os modelos permitem exibir conteúdo dinâmico no Angular. Nesta lição, você aprenderá como funcionam os modelos e a vinculação de dados.

O que é um modelo?

Um modelo é HTML que o Angular usa para renderizar a visualização de um componente. Ele combina HTML com sintaxe específica do Angular para exibir dados.

Interpolação

A interpolação permite inserir valores do seu componente no HTML. Use chaves duplas para exibir dados:

{{ data }}

{{ username }}

Vinculação de propriedades

A vinculação de propriedades permite definir dinamicamente as propriedades dos elementos HTML:

[src] = "imageUrl"

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

Vinculação de eventos

A vinculação de eventos permite que a sua aplicação responda às ações do usuário:

(click)="onClick()"

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

Vinculação bidirecional

A vinculação bidirecional mantém a sua interface do usuário e os seus dados sincronizados. Use [(ngModel)]:

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

Diretivas estruturais

As diretivas estruturais modificam o layout do DOM. Os exemplos incluem *ngIf e *ngFor.

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

Usando ngFor

*ngFor percorre os dados e exibe os elementos repetidamente:

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

Resumo

Você aprendeu a usar modelos e vinculação de dados para criar visualizações dinâmicas no Angular!