12/09/2019 Angular 2: o fim do two-way data binding?

- Blog da Caelum: desenvolvimento, web, mobile, UX e Scrum

Busca...

Angular 2: o fim do two-way data

binding?
Postado dia 31/03/2016 por Flávio Almeida em Front-end  37

Em 2009 a Google tornou open source seu framework MVC client-side batizado
Angular. Sem dúvidas, uma de suas características que o tornou tão popular foi a
associação de dados bidirecional descomplicada, o famoso two-way data binding.

Two-way data binding

No two-way data binding, alterações na view são re etidas na fonte de dados e

atualizações na fonte re etem na view sem a necessidade de manipulação explícita do
DOM. Vejamos um exemplo:

// controller
angular
https://blog.caelum.com.br/angular-2-o-fim-do-two-way-data-binding/ 1/15
12/09/2019 Angular 2: o fim do two-way data binding? - Blog da Caelum: desenvolvimento, web, mobile, UX e Scrum

.module('app')
.controller('PalestranteController', function($scope) {

$scope.palestrante = {nome: 'Flávio', email: 'N/A'};

$scope.grava = function() {
// envia os dados do palestrante para uma API
$scope.palestrante = {}; // limpa o formulário
}
});

<!-- template -->

<form ng-submit="grava()">
<input ng-model="palestrante.nome" placeholder="Nome">
<input ng-model="palestrante.email" placeholder="E-mail">
<button type="submit">Gravar</button>
</form>

No exemplo anterior, realizamos o two-way data binding através da diretiva ng-model.

A cada interação com os elementos input, os dados de entrada são enviados da view
para a fonte de dados $scope.palestrante.

Quando clicamos no botão “Gravar”, os dados são enviados para uma API e logo em
seguida atribuímos um objeto {} na propriedade $scope.palestrante para limparmos o
formulário. Nesse momento, os dados uirão da fonte de dados para a view.

Há outros recursos não menos importantes como injeção de dependências e um

sistema de módulos próprios, mas talvez o two-way data binding seja o que mais se
destacou.

Onde está o two-way data binding no Angular 2?

Em outubro de 2014 foi anunciado o desenvolvimento da versão 2.0 do framework da

Google. A nova versão gerou muita polêmica por ser muito diferente da anterior,
inclusive por não oferecer mais o two-way data binding, pelo menos não como o
conhecemos no Angular 1.X.

Vejamos o exemplo anterior, agora em Angular 2:

// o componente

import {Component} from 'angular2/core';

@Component({
selector: 'cadastro',
templateUrl: 'cadastro.html'
https://blog.caelum.com.br/angular-2-o-fim-do-two-way-data-binding/ 2/15
12/09/2019 Angular 2: o fim do two-way data binding? - Blog da Caelum: desenvolvimento, web, mobile, UX e Scrum

})
export class Cadastro {

private palestrante: Object = {nome: 'Flávio', email: 'N/A'};

public grava():void {
// envia os dados do palestrante para uma API
this.palestrante = {}; // limpa o formulário
}
}

<!-- template do componente -->

<form ng-submit="grava()">
<input [value]="palestrante.nome" placeholder="Nome">
<input [value]="palestrante.email" placeholder="E-mail">
<button type="submit">Gravar</button>
</form>

Veja que o atributo value está entre colchetes, a nova sintaxe de associação de dados
unidirecional que ui da fonte de dados para a view. Quando o componente é
renderizado, ele exibe “Flávio” e “N/A” em seus respectivos input’s. Contudo qualquer
interação do usuário com os campos não se propagará para a fonte de dados. E agora?

Angular 2 possui uma associação, também unidirecional, mas que ui da view para a
fonte de dados que é a associação de eventos, ou event binding no inglês.

Implementando two-way data binding no Angular 2

Podemos conseguir algo semelhante ao two-way data binding combinando os dois

tipos de associação:

<!-- template -->

<form ng-submit="grava()">
<input
(input)="palestrante.nome = $event.target.value"
[value]="palestrante.nome"
placeholder="Nome">

<input
(input)="palestrante.email = $event.target.value"
[value]="palestrante.email"
placeholder="E-mail">

<button type="submit">Gravar</button>
</form>

https://blog.caelum.com.br/angular-2-o-fim-do-two-way-data-binding/ 3/15
12/09/2019 Angular 2: o fim do two-way data binding? - Blog da Caelum: desenvolvimento, web, mobile, UX e Scrum

Quando o evento input é disparado, $event.target representa quem disparou o evento.

Sendo um elemento do DOM, podemos acessar seu valor com $event.target.value. É
este valor que é atualizado na propriedade palestrante do nosso componente.

NgModel está de volta, mas não como você o

conhecia!

Contudo, a equipe do Angular 2 criou uma diretiva que funciona como uma espécie de
atalho para esses dois tipos de associação, a ngModel:

<!-- template -->

<form ng-submit="grava()">
<input
[(ngModel)]="palestrante.nome"
placeholder="Nome">

<input
[(ngModel)]="palestrante.email"
placeholder="E-mail">

<button type="submit">Gravar</button>
</form>

Veja que a diretiva está envolvida por [()], ou seja, temos os dois tipos de associações
unidirecionais ao mesmo tempo, mas com direções opostas no uxo de atualização.

Conclusão

Apesar de uma sintaxe e uma implementação um tanto diferente (data binding + event
binding), é possível conseguir uma resultado semelhante ao two-way data binding em
Angular 2.

A Caelum e o Alura possuem treinamentos de Angular que você pode conferir aqui e
aqui! Inclusive a Casa do Código possui um livro de MEAN que aborda também o
assunto e no caso, com Angular 1.

Twitter: @ aviohalmeida
https://blog.caelum.com.br/angular-2-o-fim-do-two-way-data-binding/ 4/15
12/09/2019 Angular 2: o fim do two-way data binding? - Blog da Caelum: desenvolvimento, web, mobile, UX e Scrum

Compartilhe isso:

Relacionado

Angular, o novo curso da Navegando por uma Single Conhecendo a stack MEAN:
Caelum Page Application Angular MongoDB, Express, Angular
04/07/2017 11/02/2015 e Node.
In “Caelum” In “Front-end” 10/12/2013
In “Front-end”

Estude online na Alura

Programação, Mobile, Front-end, Design & UX, Infraestrutura e Business

Tags: angular, javascript, single page application

Flávio Almeida (Google+)

MAIS SOBRE O AUTOR 

OUTROS POSTS DO AUTOR 

37 COMENTÁRIOS


sombriks
01/04/2016 at 00:24 #

https://blog.caelum.com.br/angular-2-o-fim-do-two-way-data-binding/ 5/15
12/09/2019 Angular 2: o fim do two-way data binding? - Blog da Caelum: desenvolvimento, web, mobile, UX e Scrum

Oferecer o 2-way binding salva o futuro do Angular 2, evitando um novo episódio Struts
1.x -> 2.x

Nesse Vídeo ele apelida o ‘[(‘ de “banana brackets”, https://youtu.be/Xi6EQ5l84Bw?

t=19m15s

Almir Junior
01/04/2016 at 09:02 #

Opa Flávio, tudo bem? Eu não conheço muito bem a tecnologia, mas me surgiu uma
questão! Se o Two-Way Data Binding é tão bom quanto realmente parece, porque o
Google “negligenciou” ele na nova versão? Será que tem algum débito técnico? Além
dessa forma que você apresentou, teria uma forma a qual o Google achou que seria melhor
que o Two-Way Data Binding?

Angular
01/04/2016 at 09:04 #

Credo esse Angular 2.0 ein

Dagnaldo Silva
01/04/2016 at 09:50 #

Ainda não conheço o Angular2, mas to meio receoso quanto à quantidade de voltas que
teremos que dar pra resolver algo como no 1.x, assim como a sintaxe, logo, em minha
humilde opinião, tô achando mais interessante o uso do ReactJS ao Angular2.

Essa sintaxe de atributos pro html cou bastante poluída em relação às versões 1.x para
este formulário, pelo menos em minha opinião. Tem ideia se a versão 1.x será
descontinuada, se sim, quando?

À propósito, post interessante e inteligente, obrigado!

Flávio Almeida
01/04/2016 at 10:47 #

https://blog.caelum.com.br/angular-2-o-fim-do-two-way-data-binding/ 6/15
12/09/2019 Angular 2: o fim do two-way data binding? - Blog da Caelum: desenvolvimento, web, mobile, UX e Scrum

Oi Almir! Não há two-way data binding em Angular 2 por dois motivos: a previsibilidade
de mudanças e performance. O que o Angular 2 faz é combinar o data binding
unidirecional com eventos para conseguir algo semelhante (sob o ponto de vista de quem
vê o resultado) ao two-way data binding (quando trabalharmos com formulários). Foi
por isso que eles criaram o atalho para um binding de data e de eventos com `ngModel`.
Veja que ainda assim, precisamos usar a sintaxe [()] para indicar que haverá um uxo
unidirecional dos dados para a view e ainda o disparo de um evento.

Oi Dagnaldo! O React não possui two-way data binding assim como Angular 2.x, ambos
usam um uxo unidirecional, apesar do Angular 2.X, “emular” o two-way data binding
com a diretiva `ngModel`, o que é bom para quem estava acostumado com a sintaxe do
`ng-model` do Angular 1.X.

O React é uma boa alternativa, contudo ele foca apenas na criação de componentes, por
isso pode ser chamado de uma biblioteca para criar componentes. Já o Angular é um
framework e vai lhe fornecer injeção de dependência, router e outros serviços. Contudo,
Angular 2.X pode deixá-lo enrijecido e talvez você goste de ter mais liberdade criando e
combinado várias partes do seu arsenal para criar SPA’s.

Raphael
02/04/2016 at 22:56 #

Esse limpa formulário me lembrou muuuuiitto JSF

Renato Lemos
02/04/2016 at 23:21 #

Poderia jurar que angular era da Apple e depois do Google, mas agora que em dúvida!

Flávio Almeida
03/04/2016 at 12:09 #

Opa! Angular nunca foi da Apple

Abraço!

Robson

https://blog.caelum.com.br/angular-2-o-fim-do-two-way-data-binding/ 7/15
12/09/2019 Angular 2: o fim do two-way data binding? - Blog da Caelum: desenvolvimento, web, mobile, UX e Scrum

05/04/2016 at 18:21 #

Eu ainda não me acostumei com esse Angular 2, e nem sei porque eles continuaram com o
nome, já que o treco é muito diferente da versão 1.
Pode ser falta de costume, mas eu achei ele muito complicado de entender e de fazer
coisas que eram super simples no Angular 1

André
05/04/2016 at 19:48 #

Oi Flávio, sou assinante do alura.

Os cursos são excelentes lá, existe alguma previsão para o curso de angular 2?

Reinaldo
05/04/2016 at 21:53 #

Opa! O nome mudou sim, de angularjs para angular.

MaxMax
06/04/2016 at 08:34 #

Concordo com o Robson, as coisas que eram simples e rápidas de desenvolver agora
parecem tão complicadas.

Flávio Almeida
06/04/2016 at 12:16 #

Olá André,

Está nos planos do Alura o curso de Angular 2 sim, que tranquilo. Não temos uma data
de previsão, pois só lançaremos o treinamento depois que a versão nal do Angular 2 for
lançada. Fique antenado conosco!

leandro

https://blog.caelum.com.br/angular-2-o-fim-do-two-way-data-binding/ 8/15
12/09/2019 Angular 2: o fim do two-way data binding? - Blog da Caelum: desenvolvimento, web, mobile, UX e Scrum

08/04/2016 at 16:08 #

Mataram o framework !!!!!!!!!!!!!!!!!!!!!!!!!

Ythalo Rossy Saldanha Lira

09/04/2016 at 09:06 #

Acredito que as mudanças e complicações não estão relacionadas diretamente com o

framework Angular, mas com os novos paradigmas e sintaxes do próprio Javascript. Essa
nova sintaxes já é tema de discussão em diversos fóruns mundo à fora.

Lucas de Souza
10/04/2016 at 00:11 #

Que criasse um framework novo, então… Pois, mudou basicamente tudo. O AngularJS é
tão famoso por ter essa vantagem do 2-way e tirar isso acho complicado… Sem falar da
sintaxe, que mudou muito!

Plínio Balduino
11/04/2016 at 15:34 #

@Renato Lemos: o desenvolvimento Angular foi encabeçado pelo Misko Hevery, que
é/era o responsável por práticas ágeis, qualidades e testes no Google.

Recomendo ler o antigo blog dele em http://misko.hevery.com/about/

Abraço

Clairton
11/04/2016 at 16:41 #

O Emberjs ainda continua com o two-way data binding na versão dois.

Tenho formulário com varias abas, e cada aba com vários campos, e sem problema de
performance.
Mas cada framework com seus prós e contras.

https://blog.caelum.com.br/angular-2-o-fim-do-two-way-data-binding/ 9/15
12/09/2019 Angular 2: o fim do two-way data binding? - Blog da Caelum: desenvolvimento, web, mobile, UX e Scrum

Rafael Gil
11/04/2016 at 17:29 #

Eu não consigo gostar desse Angular 2. Já decidi que daqui pra frente é só React.
Achei muito confuso, complicado, praticamente obriga a usar TypeScript…
Já que vou ter que “jogar fora” quase tudo que aprendi sobre o Angular 1, já parto logo pra
proposta do React, que me pareceu mais interessante.

Pedro Silva
05/05/2016 at 06:19 #

Damn.. Esse angular 2 é demasiado confuso -.-‘

Para quem está com ideias de desistir do angular, aconselho a darem uma espreitadela no
AureliaJS (http://aurelia.io). É muito mais simples e limpo!
Já agora, o criador (Rob Eisenberg) fazia parte da equipa de desenvolvimento do angular
pois não estava a gostar do caminho que o angular ia tomar.. acho que dá para perceber
porquê.. xD

Rhoger
09/05/2016 at 16:49 #

Achei o Angular 2 muito mais complicado, angularjs 1.x resolvia problemas de forma tão
facil e limpa. Pretendo continuar usando a versão “antiga”, por mais que a Google
descontinue, é um projeto aberto, e sei que a comunidade dará suporte ainda, é uma
ferramenta muito poderosa e simples pra se perder.

Reactjs
16/05/2016 at 16:36 #

Matou o Angular, vai desencorajar geral.

Eduardo Freitas
21/05/2016 at 21:21 #

https://blog.caelum.com.br/angular-2-o-fim-do-two-way-data-binding/ 10/15
12/09/2019 Angular 2: o fim do two-way data binding? - Blog da Caelum: desenvolvimento, web, mobile, UX e Scrum

Eu até gostei, realmente 90% das variáveis em scope não necessitavam de two data bind.
Na maioria só queríamos re etir o controller na view. Fazendo dessa forma evitamos um
monte de watch desnecessários. Se for só isso, acho q melhorou.

Denner
07/06/2016 at 12:01 #

Acho que Two-Way Data Binding saiu mesmo por performance…. mas podemos criar um
component pra isso…..

Igor Couto
07/08/2016 at 19:32 #

Imutabilidade vence. Não faz sentido acoplamento de dados entre componentes.

Redux

Flavio
16/09/2016 at 11:21 #

E a sintaxe [()] ?

Diego
24/09/2016 at 20:45 #

Concordo com vc Igor…

Ricardo
09/10/2016 at 20:02 #

Temos 2 sistemas grandes em angular 1. Fiquei decepcionado com a v2, apesar de mais
performance, não ter a certeza de continuidade da versão anterior e ainda a migração ser
bastante traumática é frustante. Como teremos custo adicional no médio prazo estamos
com uma inclinação para partir para Elm. É um dos Frameworks mais rápido que
testamos, funcional e pega quebra de código antes de executar.

https://blog.caelum.com.br/angular-2-o-fim-do-two-way-data-binding/ 11/15
12/09/2019 Angular 2: o fim do two-way data binding? - Blog da Caelum: desenvolvimento, web, mobile, UX e Scrum

Se para um simples hello world vc precisa escrever mais de 5 linhas de script já considero
que tem algum problema estrutural, mesmo que a justi cativa seja que a produtividade
vem quando for desenvolver grandes sistemas.

Victor Ivens
21/10/2016 at 21:07 #

@Rhoger Eu também achei o angular 2 bem mais complicado que o angular 1, pensei
principalmente como seria di cil ensinar pros juniors. Mas então eu comecei a brincar e
fui fazer um sisteminha que gerava n pontos aleatórios em um canvas e fazia
implementações fajutas do caxeiro viajante. Rapaz, na primeira iteração de
desenvolvimento eu estava usando arrays com as posições sendo os pontos, distâncias e
a ns. Quando chegou num ponto que eu já não estava mais compreendendo, eu comecei a
usar as funções tipadas e facilitou tanto o desenvolvimento que eu entendi o motivo da
complexidade. Eu cheguei a criar uma interface, cou show de bola. Ficou mais di cil,
porém muito mais poderoso.

Jupiracy
05/11/2016 at 03:43 #

Eu sempre sou a favor de tornar a aplicacao mais rapida e menos acoplada, o que eu nao
entendo eh porque melhoram uma coisa e complicam outras. Sinto que nesta versao se
escreve muito mais codigo e sinceramente acho que a manutencao cou pior. Eu sou a
favor de ter algo mais facil de implementar.

Como por exemplo a ideia do Hybernate foi general implementou muita coisa que
escreviamos todos os dias nos codigos, facilitou muito. Depois veio outras solucoes na
mesma ideia.

Lucas Neves
05/11/2016 at 11:09 #

Olá, Flávio.

Você recomenda aprender a primeira versão do Angular ou o Angular 2 direto?

Flávio Almeida
https://blog.caelum.com.br/angular-2-o-fim-do-two-way-data-binding/ 12/15
12/09/2019 Angular 2: o fim do two-way data binding? - Blog da Caelum: desenvolvimento, web, mobile, UX e Scrum

05/11/2016 at 12:29 #

Oi Lucas! Se for para começar um projeto do zero o Angular 2. Contudo, há

muito código escrito em Angular 1.× que pode render um bom trampo durante um bom
tempo. Sendo assim, para aumentar seu índice de empregabilidade é importante saber o
Angular 1.x.

Abraço

Jonas
07/11/2016 at 14:21 #

Estou fortemente tendendo a adotar o aurelia, que me parece ter uma proposta muito boa
e inclusive foi criada por um dos membros que fazia parte da equipe do Angular 2 e saiu
por discordar dos rumos que o projeto estava tomando.

Flávio Almeida
07/11/2016 at 15:00 #

Jonas, o Aurélia é o antigo Durandal. Só que no lugar de chamarem de Durandal 2.0,

chamaram de Aurélia

diogo braga
28/11/2016 at 21:20 #

boa noite, alguma previsão de lançamento de um material da caelum sobre angularjs2?

preferencialmente livro.. parabéns pelo site e cursos de alta qualidade!

Marcus Pereira
09/01/2017 at 11:45 #

[(ngModel)] é um shorten, é um código facilitador para desenvolvedores, para bater o

olho e dizer, OLHA, já sei o que signi ca, a forma que o angular 2 trata por debaixo dos
pontos é:

bindon-NgModel= “”

https://blog.caelum.com.br/angular-2-o-fim-do-two-way-data-binding/ 13/15
12/09/2019 Angular 2: o fim do two-way data binding? - Blog da Caelum: desenvolvimento, web, mobile, UX e Scrum

Snif,

Gabriel Vieira de Jesus

20/07/2017 at 11:45 #

Flavio e amigos,

Estou trabalhando em um projeto em Ionic 1 + Angular 1 e um dos requisitos do projeto é :

Após um ltro de datas ( De – Até ) exibir um grá co de barras com os dados do resultado
da consulta.

Bem gostaria de help , qual ou quais frameworks posso utilizar para plotar esse grá co
conforme a tecnologia ( Ionic 1 + Angular 1 )

DEIXE UMA RESPOSTA



Comentário

Nome (Obrigatório) E-mail (Obrigatório) Site

Noti que-me sobre novos comentários por e-mail.

Noti que-me sobre novas publicações por e-mail.

https://blog.caelum.com.br/angular-2-o-fim-do-two-way-data-binding/ 14/15
12/09/2019 Angular 2: o fim do two-way data binding? - Blog da Caelum: desenvolvimento, web, mobile, UX e Scrum

Enviar comentário

BLOG DA CAELUM: DESENVOLVIMENTO, WEB, MOBILE, UX E SCRUM © 2019.

https://blog.caelum.com.br/angular-2-o-fim-do-two-way-data-binding/ 15/15