07/06/2023, 14:46 Class Let's Code

#854 Top Coders | Web Full Stack Seg • Qua • Sex

arrow_back Framework Front-End I | Angular

Conteúdo
Conteúdo

4 Databinding

Databinding
De forma simplificada, databinding significa comunicação, comunicação entre o template
(HTML) e o código TypeScript (lógica de negócio).

E por que essa comunicação é tão necessária?

Bom, é possível que você tenha no seu código TypeScript algum dado que você obteve do
servidor, ou algum cálculo que você queira mostrar para o usuário, e a única coisa que o usuário
vê é o template HTML, então precisamos de alguma forma fazer com que eles dois se
comuniquem para que possamos de fato fazer algo na aplicação. Ficou claro?

Nós temos diferentes formas de realizar a comunicação entre o template HTML e o código
TypeScript:

Podemos ter dados fluindo do código TypeScript para o template HTML. Para isso,
podemos utilizar interpolação de string ou property binding (binding de propriedade).

Podemos também ter dados fluindo do template HTML para o código TypeScript. Por
exemplo, reagir ao evento de clique em um botão. Para isso, utilizamos Event Binding
(binding de eventos).

Também temos outra forma de databinding, que é quando combinamos as duas formas
acima, o two-way-binding.

Interpolação de string

No exemplo a seguir, uma string com o valor "primeiro" é declarada no componente.

import { Component } from '@angular/core';

@Component({
selector: 'app-my-first-component',
templateUrl: './my-first-component.component.html',
})
export class MyFirstComponent {
name: string = 'Fulano de Tal';

https://class.letscode.com.br/apps/academy/courses/977326ae-d78b-4f19-a54b-7f268eecf2dd/122fa596-0ed8-4812-aed8-cd6fc870cb7c/f303699… 1/4
07/06/2023, 14:46 Class Let's Code

greeting(): string {
return `Olá, seja bem-vindo, ${this.name}!`;
}
}

Utilizando interpolação de string, podemos obter no template o valor contido em name da

seguinte forma:

<p>Olá, meu nome é {{ name }}.</p>

No browser, iremos visualizar o texto: Olá, meu nome é Fulano de Tal.

Qualquer valor no componente que se resolva como uma string pode ser exibido utilizando
interpolação de string, até uma função, caso ela retorne um string. Veja o exemplo:

<p>{{ greeting() }}</p>

No browser, desta vez, iremos visualizar o texto: Olá, seja bem-vindo, Fulano de Tal!

Property Binding (Binding de Propriedade)

Podemos também modificar dinamicamente o valor de uma propriedade utilizando Property

binding conforme o exemplo a seguir:

import { Component } from '@angular/core';

@Component({
selector: 'app-my-first-component',
templateUrl: './my-first-component.component.html',
})
export class MyFirstComponent {
enableButton = true;
}

<button [disabled]="!enableButton"></button>

enableButton é uma propriedade definida no componente que pode mudar dinamicamente e

fazer com que o botão criado no template fique habilitado ou desabilitado dependendo do
https://class.letscode.com.br/apps/academy/courses/977326ae-d78b-4f19-a54b-7f268eecf2dd/122fa596-0ed8-4812-aed8-cd6fc870cb7c/f303699… 2/4
07/06/2023, 14:46 Class Let's Code

estado que essa propriedade estiver.

Event Binding (Binding de Evento)

Podemos escutar os eventos utilizando Event binding e, ao escutar determinado evento,

executar algum tipo de ação, conforme exemplo a seguir:

<button (click)="onClickButton()">Clique aqui!</button>

O evento click se refere ao clique do mouse. Quando o botão for clicado, será executada a
função onClickButton() .

Quando queremos ter acesso no nosso código TypeScript aos dados emitidos com determinado
evento, utilizamos $event , conforme exemplo a seguir:

<input type="text" (input)="onEditText($event)" />

O $event irá conter os dados emitidos com aquele evento e um desses dados é o texto escrito
no input , por exemplo.

Two-Way-Binding

No último exemplo, utilizamos o evento input para passar os dados do evento para o
componente. E se pudéssemos também, ao mesmo tempo, atualizar o valor exibido no elemento
input conforme determinado valor no componente muda? Podemos fazer isso utilizando o
[(ngModel)] , conforme exemplo a seguir:

<input type="text" [(ngModel)]="randomText" />

Vale salientar que, para que o ngModel funcione, é preciso importar o FormsModule no
app.module . Veremos com mais detalhes essa implementação posteriormente, no capítulo
referente a Formulários.

Utilizando o [(ngModel)] no nosso elemento input , o texto digitado é passado para a

propriedade randomText do componente, da mesma forma que, os valores atribuídos ao
randomText no componente serão atualizados no elemento input e exibidos no template.

https://class.letscode.com.br/apps/academy/courses/977326ae-d78b-4f19-a54b-7f268eecf2dd/122fa596-0ed8-4812-aed8-cd6fc870cb7c/f303699… 3/4
07/06/2023, 14:46 Class Let's Code

Referências e Links úteis

Angular Data Binding. Acesso em: 02/07/2022.

chevron_left Tópico anterior Próximo Tópico chevron_right

https://class.letscode.com.br/apps/academy/courses/977326ae-d78b-4f19-a54b-7f268eecf2dd/122fa596-0ed8-4812-aed8-cd6fc870cb7c/f303699… 4/4