Aprenda o que é Databinding com Angular

Podemos dizer que databinding é a comunicação entre a view e a lógica, quando atualizamos a lógica ela reflete na view.

Existem três tipos de databinding no Angular:

• One way databinding, que vai da lógica do JS para o view do HTML.
  • A saída de dados da lógica reflete na view como String Interpolation ou Property binding.
• One way databinding, da view para lógica.
  • Aqui podemos reagir a eventos do HTML, como clicks de botões, com o Event binding.
• Two way binding, entre a lógica e a view.
  • Aqui é uma combinação, podemos reagir a eventos e output ao mesmo tempo.

Databinding setup

Não temos um setup específico para fazer, então vamos manter as coisas simples e utilizar o “app.component” para fazer nossos experimentos e a medida que for necessário criar alguma coisa, vamos ver passo a passo.

String Interpolation (Interpolação de String)

A interpolação de string é usada para dados dinâmicos e fica dentro do “.component.ts” o arquivo de lógica, e é mostrado no “.component.html” o arquivo da view.

Vamos pensar no seguinte exemplo, ao usuário logar em nossa página vamos mostrar uma mensagem de boas-vindas a ele.

Os dados podem vim de uma fonte externa do HTTP request, como um database ou JSON ou algo parecido com isso. Para fins mais simples, vamos adicionar o valor dos dados na mão.

Vamos usar o “app.component.ts” e o “app.component.html”.

O código do “app.component.ts” deve ser parecido com isso:

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
 
export class AppComponent {
  public title = 'meu primeiro app';
}

O código do “app.component.html” deve ser parecido com isso:

<h1>{{ title }}</h1>
<hr>

Então nosso title do HTML recebe o valor do Title do TS, isso não é incrível?

Nós já estamos usando uma interpolation string, mas vamos criar uma nós mesmos.

1 – Primeiro vamos na classe AppComponent e vamos adicionar a propriedade chamada “username”, e vamos colocar qualquer valor que quisermos.

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
 
export class AppComponent {
  public title = 'meu primeiro app';
  public username = 'Dener Troquatte';
}

Esse valor que acabamos de passar pode vir do backend ou de várias outras formas.

Como estamos usando o TypeScript (TS) podemos tipar o nosso username, a sintaxe ficaria desta forma para essa propriedade:

Username: string = ‘Dener Troquatte’;

Ou seja, a sintaxe é composta por “nome_da_propriedade: tipo = valor;”

Não é necessário para funcionar, porém essa é uma das forças do TS a tipagem de dados, então eu recomendo sempre tipar.

2 – Agora vamos pegar o username da lógica e jogar na view.

<h1>Olá {{ username }}, bem-vindo ao {{ title }}</h1>
<hr>

Vale observar que usamos {{ nome da propriedade }} essa é sintaxe para o interpolation.

Também é possível mostrar qualquer single line expression que seja a saída em uma string.

Podendo ser um método que resulte em uma string ou number que pode ser convertido em uma string. Mas não pode ser uma estrutura de dados com uma instrução if ou for loop.

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
 
export class AppComponent {
  public title = 'meu primeiro app';
  public username = 'Dener Troquatte';

  public getUsername() {
    return this.username;
  }
}

Esse exemplo é uma simples maneira de mostrar o que podemos fazer e como return da propriedade username.

<h1>Olá{{ getUsername() }}, bem-vindo ao {{ title }}</h1>
<hr>

Property Binding

Aqui é onde podemos manipular as propriedades do HTML, como o onClick, usamos o property binding para mexer com eles.

<element [property]='value'></element>

Vamos fazer um exemplo onde inserimos um innerText no elemento h1 da página e concatenamos com o nome do usuário.

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
 
export class AppComponent {
  public user:string = 'Dener Troquatte';
  public greeting:string = 'Bem-vindo ao app';
 
  public getGreeting() {
    return `${this.greeting}  ${this.user}`;
  }
}

Agora podemos inserir o valor do método dentro do property, simples assim.

<h1 [innerText]='getGreeting()'></h1>
<hr>

Vale lembrar que não é possível usar property binding e string interpolation juntos, pois causa um erro.

<h1 [innerText]='{{ getGreeting() }}'></h1>

Esse exemplo acima causaria um ERRO!

Event Binding

Vamos criar um exemplo onde o usuário clica em um botão de submit de um formulário de registro. Ao invés de redirecionar para outra página com a mensagem de sucesso, vamos mostrar a mensagem diretamente na mesma página.

Então vamos precisar de algumas coisas.

• Uma propriedade que vai ter a mensagem;
• Um método que irá fazer a mensagem aparecer ao clicar no botão (que é onde dispara o evento).

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
 
export class AppComponent {
  public formMessage!:string;
 
  public onSubmitForm() {
    return this.formMessage = 'Obrigado por se registar. Vamos enviar um e-mail de confirmação.';
  }
}

Vamos fazer algumas coisas que serão elas adicionar o formMessage como uma string interpolation e colocar o evento de click no botão de registro.

<button (click)='onSubmitForm()'>Register</button>
<p>{{ formMessage }}</p>

Ao clicar no botão de Submit, a mensagem que definimos no metodo onSubmitForm() irá aparecer na tela.

Two-way Databinding

É aqui que combinamos o Property e Event Binding para reagir aos eventos e output ao mesmo tempo.

Agora sim podemos combinar sintaxe sem causar erros.

<element [(property)]='value'></element>

Vamos imaginar que ao estar criando um e-mail, ao ir digitando-o já vai mostrando como será o e-mail completo.

Vamos precisar somente de uma propriedade chamada ‘emailAddress’.

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
 
export class AppComponent {
  public emailAddress!:string;
}

Agora na View vamos precisar de um input para o usuário digitar e algum campo para mostrar o e-mail completo.

<input type="text" [(ngModel)]="emailAddress">
<p>{{ emailAddress }}@gmail.com</p>

Para acontecer essa interação do usuário digitar e já aparecer na view ao mesmo tempo, vamos usar uma diretiva chamada ‘ngModel’ que tem como target o emailAddress.

Para a saída de dados reagir ao mesmo tempo, vamos usar uma simples string interpolation e mostrar o e-mail digitado. Você vai perceber que esse exemplo ainda não vai funcionar, pois falta a importação e registro do FormsModule dentro do nosso app.module.ts.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

// Importe FormsModule pois estamos trabalhando com input
import { FormsModule } from '@angular/forms';
 
import { AppComponent } from './app.component';
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule    // Registro do FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Agora sim nossa aplicação vai compilar sem erro e ao ir digitando, já vai mudando na tela automaticamente.

Agora é hora de praticar tudo que vimos, não deixe de criar novos exemplos para você e ir se desafiando cada dia mais.