Olá meu povo!!!!!

Hoje vamos estudar sobre os tipos de bindings em angular, neste post vamos ver a teoria e no final do artigo vamos implementar um exemplo para cada tipo de binding

Conteúdo

Introdução

Interpolation

Attribute binding

Event binding

Two way binding

Introdução

Os bindings em angular são as formas de como a View interage com Model/(Compoment).

Vamos entender os tipos de binding disponíveis

Interpolation

Interpolation ou interpolação em português é o tipo mais comum de binding, ele é utilizado para transportar o valor de propriedades e retorno de métodos do componente para o template HTML.

Na interplação utilizadmos o nome da propriedade ou método dentro de duas chaves "{{}}", em inglês curly brackets

ex.:

<h1>{{propriedade}}</h1>

Attribute binding

Aqui a coisa começa a ficar mais interessante, pois com attribute binding podemos setar o valor de qualquer atributo de um elemento html.
Podemos utilizar a interpolação para tanto da seguinte forma:

<input type="text" value="{{propriedade}}">

Podemos também utilizar os colchetes "[]" para envolver o atributo do elemento html (ex.: [value]="propriedade") , desta forma o template irá receber o valor da propridade do componente diretamente no atributo sem a necessidade de utilizar a interpolação, exemplo:

<input type="text" [value]="propriedade">

Event binding

Neste tipo de binding enviamos valores vindos do template HTML para o componente, este tipo de binding é importantíssimo por ser utilizado para manipular os eventos e interações com o template e enviados para o componente.

E como o próprio nome diz, event binding, utilizamos de eventos para que possamos disparar os métodos ou expressões para atualizarmos a model a partir de um elemento Html presente no template.

Por exemplo, em um input field, podemos disparar um evento enquanto o campo está sendo preenchido:

<input (input)="model.skype=$event.target.value" type="text" class="form-control" />

Em angular definimos o event binding utilizando os parenteses "(nomeevento)",
ex.:para o evento "OnChange" utilizamos (change), para o "OnClick" temos (click) no caso (input) representa um evento que é capturado quando uma tecla é pressionada. desta forma podemos definir uma expressão para setar a model

ex.:(input)="model.skype=$event.target.value"

ou podemos também chamar um método

ex.:(input)="metodoHandler($event)"

e também transferir o valor do template para o componente através do objeto $event

Two way binding

Diferente do angular Js, o binding de duas vias em angular algumas otimizações de perfomance foram implementadas, e por este motivo não existe mais este tipo de binding e sim uma combinação do attribute binding e event binding quando precisamos atualizar o template e o componente existe a diretiva ngModel, utilizada nos elemtos de um formulário que simplifica o modo de fazermos o binding de duas vias.

Neste tipo de binding, como explicado, anteriormente temos a união dos dois tipos de binding em uma sintaxe conhecida como "banana in the box" ou [(ngModel)], como podemos ver esta sintaxe realmente lembra duas bananas, representando os parenteses "()", e a caixa, representando os colchetes "[]", uma forma simples de lembrar a sintaxe é imaginar esta figura abaixo:

Podemos então utilizar esta diretiva da seguinte forma:

neste exemplo ao se alterar o valor do campo nome o mesmo é refletido no html através do binding interpolação {{nome}}

Mão à obra

Em nossa primieraAppAngular (github)
Vamos criar então um componente para exemplificar os três tipos de binding

ng g c components/exemplo-bindings

Compoentes gerados, vamos agora editar o html (exemplo-bindings.component.html)

<table class="table table-striped table-bordered">
  <thead>
    <tr>
      <th>Tipo de Binding</th>
      <th>descrição</th>
      <th>Exemplo</th>
      <th>Two way binding - comparação</th>
    </tr>
  </thead>
  <tr>
    <th>Interpolation</th>
    <td> ({{'{{'}}model.nome}})
      <br /> exibe o valor da proriedade</td>
    <td>{{model.nome}}</td>
    <td>
      <input [(ngModel)]="model.nome" type="text" class="form-control" />
    </td>
  </tr>
  <tr>
    <th>Attribute binding
      <br />
      <i>"curly brackets"</i>
    </th>
    <td> value="{{'{{'}}model.email}}"
      <br /> altera o valor do elemento, mas não altera a model</td>
    <td>
      <input name="email" value="{{model.email}}" type="text" class="form-control" />
    </td>
    <td>
      <input [(ngModel)]="model.email" type="text" class="form-control" />
    </td>
  </tr>
  <tr>
    <th>Attribute binding
      <br />colchetes</th>
    <td>[value]="model.email"
      <br /> altera o valor do elemento, mas não altera a model</td>
    <td>
      <input name="email" [value]="model.email" type="text" class="form-control" />
    </td>
    <td>
      <input [(ngModel)]="model.email" type="text" class="form-control" />
    </td>
  </tr>
  <tr>
    <th>Event binding</th>
    <td>[(ngModel)]="model.skype"
      <br /> altera a model, mas não altera o componente</td>
    <td>
      <input (input)="model.skype=$event.target.value" type="text" class="form-control" />
    </td>
    <td>
      <input [(ngModel)]="model.skype" type="text" class="form-control" />
    </td>
  </tr>
  <tr>
    <th>Two way binding
      <br />(event + attribute binding)</th>
    <td>(input)="model.site=$event.target.value [value]="model.site"
      <br />altera o valor do componente e a model</td>
    <td>
      <input [value]="model.site" (input)="model.site=$event.target.value" type="text" class="form-control" />
    </td>
    <td>
      <input [(ngModel)]="model.site" type="text" class="form-control">
    </td>
  </tr>
  <tr>
    <th>Two way binding ngModel</th>
    <td>[(ngModel)]="model.site"
      <br />altera o valor do componente e a model</td>
    <td>
      <input [(ngModel)]="model.site" type="text" class="form-control">
    </td>
    <td>
      <input [(ngModel)]="model.site" type="text" class="form-control">
    </td>
  </tr>
</table>

<div class="col-md-6">
  <div class="container">
    <h6>model</h6>
    <pre>{{model | json}}</pre>
  </div>
</div>

Agora editar a classe do componente (exemplo-bindings.component.ts)

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

@Component({
  selector: 'app-exemplo-bindings',
  templateUrl: './exemplo-bindings.component.html',
  styleUrls: ['./exemplo-bindings.component.css']
})
export class ExemploBindingsComponent implements OnInit {
  model = {
    nome: "Adilson de Almeida Pedro",
    email: "adilson@almeidapedro.com.br",
    telefone: "+55 11 9 9353-6732",
    site: "http://adilson.almeidapedro.com.br",
    skype:"fazsite"
  }

  constructor() { }

  ngOnInit() {
  }

}

Adicionamos o componente dentro do nosso modulo de exemplos para que possamos visualizar no browser

ng g c exemplos/bindings

Vamos editar o arquivo (bindings.component.html)

<h1>Bindings</h1>
<hr>
<div>
    <app-exemplo-bindings></app-exemplo-bindings>
</div>

Rode a aplicação

ng serve -o

Após rodar a aplicação e navegar para o componente.

Para testar a diferença dos bindings altere os valores nas colunas "Exemplo" e "Two way binding - comparação"