Angular 2 - Cadastro de Clientes - XII

 Neste artigo vou mostrar como criar um cadastro de clientes e fazer o CRUD usando o Angular 2 e o Visual Studio Code.

Neste artigo vamos exibir os dados de um cliente selecionado no formulário de detalhes, e, para fazer isso vamos usar o DataBinding do Angular 2. (link do artigo anterior)

O Data binding ou vinculação de dados é a sincronização de dados entre os componentes do modelo e da view. Para exibir a propriedade de um componente, você pode colocar seu nome no template da view, usando a interpolação, ou seja, incluído-o em chaves duplas {{}}.

Neste contexto podemos ter a vinculação de dados de uma única via conhecido como one-way databinding e a vinculação de dados de duas vias conhecido como two-way databinding.

No one-way databinding a vinculação de dados que segue o sentido do componente para o template pode ser feito usando as chaves duplas {{valor}} ou o Property Binding (binding de propriedade) [propriedade]="valor"; a vinculação que segue o sentido do template para o componente pode ser feita usando o Event Binding (binding de evento) :  (evento)="handler".

1- Interpolação :   <div>{{cliente.nome}}</div>  : exibe na tela os dados do atributo contido entre chaves duplas ‘{{ }}’.

 

2- Binding de propriedade :  <div [gravar]="gravar"></div> : que associa um valor para uma variável visível no escopo do Angular 2.

 

3- Binding de evento : <button (click)="salvar()">Salvar</button> : utilizado para adicionar uma ação a um elemento como clicar em um

botão e chamar um método.

 


A ligação de dados bidirecional, o two-way databinding, funde a vinculação de propriedades e de eventos numa única notação utilizando a diretiva ngModel.

Assim, combinando os bindings de evento e de propriedade obtemos o two-way Databinding:   <input [(ngModel]) = "cliente.nome" >

Com o two-way databinding temos a sincronização bidirecional, e assim, sempre que o valor for alterado quer seja no componente ou no template ele será sincronizado e atualizado em ambos os lados.

Aplicando o one-way databinding usando interpolação {{}}

Para você perceber na prática a diferença vamos iniciar aplicando o one-way databinding para exibir os dados do cliente selecionado no formulário de detalhes.

Vamos abrir o arquivo cliente-detalhe.componente.html e usar a interpolação, ou seja, as chaves duplas {{ }}, para exibir os valores de forma unidirecional. Nessa abordagem temos que o fluxo vem do componente para o template:

Altere o código do arquivo incluindo o código na cor azul como mostrado a seguir:

<div class="container"> 
<h2>Salvar Cliente</h2>
<form>
    <div class="form-group">
        <label for="nome">Nome</label>
        <input type="text" class="form-control" placeholder="Informe o nome"  value="{{cliente.nome}}">
    </div>
    <div class="form-group">
        <label for="email">Email</label>
        <input type="email" class="form-control" placeholder="Informe o email" value="{{cliente.email}}">
    </div>
    <div class="form-group">
        <label for="telefone">Telefone</label>
        <input type="text" class="form-control" placeholder="Informe o telefone" value="{{cliente.telefone}}">
    </div>
    <button type="submit" class="btn btn-success">Salvar</button>
     <a class="btn btn-secondary" routerLink="/">Voltar </a>
</form>
</div>

Ao salvar as alterações no arquivo o BrowserSync irá atualizar a aplicação e podemos selecionar um cliente e ver os seus dados agora exibidos no formulário de detalhes:

Nessa abordagem estamos obtendo o valor de um atributo da nossa classe ClienteDetalheComponent definida no arquivo cliente-detalhe.component.ts e exibindo em nosso template, o arquivo cliente-detalhe.componente.html . Assim os dados estão sendo apenas exibidos e estão no formato somente leitura. 

Qualquer alteração feita no template não será refletida no componente.

Para mostrar isso, poderíamos usar o event binding, criando um botão de comando no template e definindo um evento Click para que o usuário possa interagir com a aplicação.
Ex: <button (click)="alterar()" class="btn btn-warning"></button>

Aplicando o one-way databinding usando o property binding

Vamos agora aplicar o property binding ao nosso template para mostrar outra forma de one-way databinding.

Abra o arquivo cliente-detalhe.componente.html e inclua o código conforme destacado em azul abaixo:

<div class="container"> 
<h2>Salvar Cliente</h2>
<form>
    <div class="form-group">
        <label for="nome">Nome</label>
        <input type="text" class="form-control" placeholder="Informe o nome"  [value]="cliente.nome">
    </div>
    <div class="form-group">
        <label for="email">Email</label>
        <input type="email" class="form-control" placeholder="Informe o email" [value]="cliente.email">
    </div>
    <div class="form-group">
        <label for="telefone">Telefone</label>
        <input type="text" class="form-control" placeholder="Informe o telefone" [value]="cliente.telefone">
    </div>
    <button type="submit" class="btn btn-success">Salvar</button>
     <a class="btn btn-secondary" routerLink="/">Voltar </a>
</form>
</div>

Aqui teremos o mesmo resultado obtido quando usamos a interpolação e os dados estão vindo do componente para o template.

Aplicando o two-way data binding

Vamos agora aplicar o two-way databinding e assim permitir a sincronização de dados entre o componente e o template. Nessa abordagem qualquer alteração no componente se refletir no template e vice-versa.

Para poder usar o two-way databinding temos que importar o módulo FormsModule no arquivo cliente.module.ts. O FormsModule fornece diretivas e componentes relacionados aos formulários.

Abra o arquivo cliente.module.ts e inclua o código em azul abaixo:

import { ClienteRoutingModule } from './cliente-routing.module';
import { ClienteService } from './cliente.service';
import { FormsModule} from '@angular/forms';
@NgModule({ 
    imports : [ 
        CommonModule,
        ClienteRoutingModule,
        FormsModule       
    ],
     declarations : [
         ClientesListaComponent,
         ClienteDetalheComponent
     ],
     exports : [ ClientesListaComponent],
     providers: [
         ClienteService
     ]
})
export class ClientesModule {}

Agora no arquivo cliente-detalhe.componente.html defina o código em azul como mostrado a seguir:

<div class="container"> 
<h2>Salvar Cliente</h2>
<form>
    <div class="form-group">
        <label for="nome">Nome</label>
        <input type="text" class="form-control" placeholder="Informe o nome"  
         name="nome"
         [ngModel]="cliente.nome"
         (ngModelChange)="cliente.nome = $event" >
    </div>
    <div class="form-group">
        <label for="email">Email</label>
        <input type="email" class="form-control" placeholder="Informe o email"         
         name="email"
         [ngModel]="cliente.email"
         (ngModelChange)="cliente.email = $event" >
    </div>
    <div class="form-group">
        <label for="telefone">Telefone</label>
        <input type="text" class="form-control" placeholder="Informe o telefone" 
         name="telefone"
         [ngModel]="cliente.telefone"
         (ngModelChange)="cliente.telefone = $event" >
    </div>
    <button type="submit" class="btn btn-success">Salvar</button>
     <a class="btn btn-secondary" routerLink="/">Voltar </a>
</form>
</div>

Neste código precisamos definir o atributo name do formulário definindo o nome de cada campo do formulário. Sem fazer isso o Angular 2 vai emitir um erro.

A seguir estamos atualizando o template usando o property binding com o ngModel e assim estamos atualizando o template a partir do componente.

Depois estamos usando o event binding do NgModel, o ngModelChange, para atualizar o componente a partir do template, ou seja, quando o usuário fizer alguma alteração no template, o angular emite um evento interno, que será o valor do campo, e assim o evento vai atualizar o valor do componente. 

Temos assim o two-way databinding funcionando conforme mostrar o exemplo abaixo:

Observe que selecionamos um cliente e no formulário de detalhes alteramos os dados do cliente e ao retornar vemos que as alterações atualizaram o componente; temos assim o two-way databinding.

Para concluir vamos melhorar o código do nosso template, o arquivo  cliente-detalhe.componente.html alterando o seu código como mostrado abaixo:

<div class="container"> 
<h2>Salvar Cliente</h2>
<form>
    <div class="form-group">
        <label for="nome">Nome</label>
        <input type="text" class="form-control" placeholder="Informe o nome"  
         name="nome"
         [(ngModel)]="cliente.nome" >
    </div>
    <div class="form-group">
        <label for="email">Email</label>
        <input type="email" class="form-control" placeholder="Informe o email"         
         name="email"
          [(ngModel)]="cliente.email" >
    </div>
    <div class="form-group">
        <label for="telefone">Telefone</label>
        <input type="text" class="form-control" placeholder="Informe o telefone" 
         name="telefone"
         [(ngModel)]="cliente.telefone" >
    </div>
    <button type="submit" class="btn btn-success">Salvar</button>
     <a class="btn btn-secondary" routerLink="/">Voltar </a>
</form>
</div>

Como você percebeu simplificamos o código mesclando o property binding e o event binding em uma sintaxe mais simples.

 [ngModel]="cliente.nome"
 (ngModelChange)="cliente.nome = $event"		   ==>   [(ngModel)]="cliente.nome"

Agora temos o two-way databinding funcionando usando o ngModel na sintaxe simplificada. Como estamos usando um serviço com dados em memória a atualização é automática.

No próximo artigo vamos continuar mostrando como incluir um novo cliente.

Respondeu Jesus, e disse-lhes: Ainda que eu testifico de mim mesmo, o meu testemunho é verdadeiro, porque sei de onde vim, e para onde vou; mas vós não sabeis de onde venho, nem para onde vou.
Vós julgais segundo a carne; eu a ninguém julgo.
E, se na verdade julgo, o meu juízo é verdadeiro, porque não sou eu só, mas eu e o Pai que me enviou.
João 8:14-16

Veja os Destaques e novidades do SUPER DVD Visual Basic (sempre atualizado) : clique e confira !

Quer migrar para o VB .NET ?

Quer aprender C# ??

Quer aprender os conceitos da Programação Orientada a objetos ?

Quer aprender o gerar relatórios com o ReportViewer no VS 2013 ?

Referências:

José Carlos Macoratti