Curso Angular 2 – Aula 7: Templates

Curso básico gratuito de Angular 2 | kazale.comO objetivo da aula 7 é apresentar os recursos de template utilizados pelo Angular 2 para manipular o HTML da página tornando os dados dinâmicos.

 

Digite seu email para se inscrever em nossa newsletter e receber atualizações sobre novos conteúdos.

Ao término dessa aula você aprenderá como utilizar os recursos de template do Angular 2 para manipular os elementos HTML de uma página.

1. Definição

Uma vez que o Angular 2 utiliza HTML para a composição de sua interface, precisamos de elementos de template responsáveis pela manipulação do DOM HTML, tornando-o dinâmico e interativo.

Dentre os principais recursos utilizados pelo Angular 2 para manipulação de templates estudaremos a interpolação, eventos, atribuições, binding e operadores condicionais e de repetição, conforme seguem os tópicos a seguir.

2. Interpolação

Interpolação é o modo mais simples e básico de interação com o HTML da página, e ela é responsável por exibir dados do componente ou o resultado de expressões na tela.

O operador que representa a interpolação no Angular 2 são as chaves duplas ‘{{ }}’, e tal operador apresenta as seguintes caracteristicas:

Exibe o valor de um atributo do componente na tela.

Exibe o valor de uma expressão na tela após calculá-la.

Exibe o valor de uma expressão na tela composta por uma constant e um valor retornado por um método no componente.

Exibe um valor transformado por um filtro utilizando o operador pipe ‘|’.

Apesar da interpolação ser bastante flexível e poderosa na exibição de dados, ela apresenta as seguintes restrições:

  • Não permite uso de operadores de atribuição como ‘=’, ‘+=’, ‘-=’
  • Não permite o uso do operador ‘new’ para criar objetos
  • Não permite mais de uma expressão, separadas por ‘;’
  • Não permite operações de incremento ou redução ‘++’, ‘—‘
  • Não suporta operadores de deslocamento de bits ‘|’, ‘&’
  • Não consegue acessar propriedades de escopo global como o ‘window’, ‘document’, ‘console.log’, ‘Math’

Por fim, tenha em mente que apesar do suporte a várias operações, o operador de interpolação deverá ser utilizado para fins de exibição de dados na tela, e como o Angular 2 pode chamá-lo várias vezes durante a execução da aplicação, é recomendável evitar o uso de expressões complexas ou muita lógica envolvida nela, a fim de evitar problemas de performance. Deixe as regras de negócio para o componente e apenas use a interpolação para exibição dos dados na tela.

3. Eventos

Eventos representam uma ação executada pelo usuário sobre algum componente HTML. Tal ação pode ser um clique com o mouse, ou mesmo uma interação com o teclado.

O operador utilizado pelo Angular 2 para adicionar um evento a um componente são os parênteses ‘( )’.

Por convenção o Angular 2 usa como base o nome dos eventos HTML sem o prefixo ‘on’, conforme tabela abaixo que contém alguns exemplos:

Evento HTMLAngular 2
onclick(click)
onkeydown(keydown)
onkeyup(keyup)
onmouseover(mouseover)
onmouseout(mouseout)

Os eventos geralmente são associados com um método definido no componente para executar determinada ação, como por exemplo processar os dados de um formulário, validar dados, exibir uma mensagem…

As regras permitidas nos eventos são basicamente as mesmas aplicadas para a interpolação, porém os eventos suportam o operador de atribuição ‘=’, assim como o uso de múltiplas expressões separadas por ‘;’.

Por último, também é possível enviar os dados do evento em questão para o método do componente através da variável ‘$event’, assim teremos disponíveis diversas informações sobre o componente HTML, como o seu valor.

Abaixo seguem exemplos de utilização de eventos:

Define os eventos no componente:

Exibe um alert box com uma mensagem ao clicar no botão.

Exibe um alert box com o texto digitado sempre que uma Tecla for pressionada.

Define o valor de um atributo no componente e exibe um alert box com a mensagem definida.

4. Atribuições

O uso de atribuições se da de forma muito semelhante com eventos, porém uma atribuição modifica um atributo de um determinado componente HTML, e utiliza como padrão o operador ‘[ ]’.

O uso dos colchetes está associado com o nome do atributo do HTML a ser modificado, conforme exemplo a seguir:

O código acima gerencia o valor do atributo HTML ‘disabled’, alternando a ativação dos botões sempre que clicado.

5. One-way e Two-way binding

O Angular 2 precisa de um modelo de mapeamento entre o código JavaScript/TypeScript do componente com o HTML da página, e esse modelo é o que chamamos de binding.

O binding pode ser criado de duas formas distintas, One-way ou Two-way, que significa de uma ou duas direções respectivamente.

A interpolação, eventos e atribuições estudadas acima, compõe o One-way binding pois eles somente adicionam uma ação, seja ela do HTML para o componente ou do componente para o HTML.

O exemplo abaixo mostra o uso de uma atribuição. Foi atribuído ao componente de texto HTML o valor do atributo ‘nome’ encontrado no componente. Repare que ao alterar o valor da caixa de texto o atributo ‘nome’ do componente não é modificado, assim temos apenas uma ação do componente para o HTML.

Já no exemplo a seguir temos um evento atribuído ao nosso campo de texto, que será executado sempre que uma tecla for pressionada. Repare que nesse caso o HTML executa uma ação no componente, que reflete na alteração do valor do atributo no componente, porém o valor do campo do texto não está associado diretamente com o atributo do componente.

Acima criamos dois modelos diferentes de atribuição, porém ambos executam apenas uma ação entre o componente e o HTML.

Que tal combinar ambas ações para assim termos um mapeamento completo de ambas as partes?

Tal combinação é o que chamamos de Two-way binding, que é representado pelo uso em conjunto dos colchetes e parenteses ‘[( )]’.

O Two-way binding é utilizado com muita frequência em formulários (através da diretiva ngModel), para referenciarmos os campos do formulário com o componente do Angular 2, onde qualquer alteração no valor em ambas as partes mantém os respectivos valores sincronizados.

Abaixo segue um exemplo de Two-way binding, repare que sempre que um valor é alterado ele é refletido para ambos componentes.

6. Classes, estilos CSS e ngClass

Toda aplicação interativa necessitará em algum momento manipular dinamicamente atributos de estilo CSS para adicionar um novo elemento, alterar uma cor, um posicionamento, ou mesmo exibir ou esconder um elemento.

O Angular 2 permite manipular estilos CSS de três formas diferentes:

  • Através do atributo ‘style’
  • Através do atributo ‘class’
  • Através da diretiva ‘ngClass’

O atributo ‘style’ deverá ser utilizado quando quisermos apenas alterar um estilo específico para um elemento HTML.

Já o atributo ‘class’ é utilizado da mesma forma que o ‘style’, com a diferença que ele é utilizado para aplicar classes CSS nos elementos, onde as classes agrupam estilos.

Por fim temos a diretiva ‘ngClass’, que permite manipular múltiplas classes CSS por vez, permitindo maior flexibilidade para casos mais complexos.

O exemplo a seguir contém as três implementações, ‘style’, ‘class’ e ‘ngClalss’:

7. Condicional com o *ngIf

O Angular 2 possui uma diretiva para aplicar uma ação condicional em um elemento HTML, que é a diretiva ‘*ngIf’.

A diretiva ‘*ngIf’ recebe como parâmetro um valor booleano, que indicará se o elemento deverá ou não ser exibido na tela. O parâmetro pode ser uma expressão, a chamada para um método do componente, ou um simples atributo de classe, más o importante é que o valor passado retorne um valor booleano.

Um detalhe importante é que quando a diretiva ‘*ngIf’ contém o valor ‘false’, o elemento HTML é removido do DOM, que é a árvore de componentes HTML, que é um comportamento diferente do estilo ‘display: none’ do CSS, que apenas esconde o elemento da tela apesar dele continuar no DOM.

O código a seguir exibe a utilização do ‘*ngIf’ , onde dois textos distintos são exibidos dependendo da condição imposta.

8. Iteração com o *ngFor

Muitas vezes precisamos iterar sob listas para exibir ou processar certos dados, e para isso o Angular 2 disponibiliza a diretiva de iteração ‘*ngFor’.

A diretiva ‘*ngFor’ basicamente recebe como parâmetro a lista de dados a serem iterados, e para cada iteração o valor corrente da lista é retornado em uma variável de escopo local, visível somente pelo elemento HTML responsável pela iteração.

Outro recurso interessante do ‘*ngFor’ é obter o índice referente a posição do elemento na lista, começando a partir do número zero.

O código a seguir mostra como utilizar a diretiva ‘*ngFor’. Na segunda lista reparem o uso da variável ‘index’, responsável por retornar a posição do elemento atual na lista:

 

Clique para fazer o download dos arquivos do template base da aula 7.

Clique para fazer o download dos arquivos do projeto completo desenvolvido na aula 7.

8 comentários em “Curso Angular 2 – Aula 7: Templates

  1. Comecei com angular 2 por causa de suas aulas. Você transfere o seu conhecimento de form bem didática e agradeço por isso. Estava fazendo um projeto em angular 1 e parei para já iniciá-lo no 2 e os resultados são excelentes. Grato

  2. Parabéns pelo ótimo curso… agora estou empolgado em aprender angular, pois só achava conteúdo bom em inglês.

    Vai continuar com as aulas?
    Até que aula pretende ir?

    Obrigado.

    1. Obrigado Caio, que bom que esteja gostando!

      Vou terminar o conteúdo programado do curso e a seguir continuar com artigos periódicos com tópicos mais avançados.

      Bons estudos!

  3. Fiquei com uma dúvida no ngFor: E se eu quisesse mostrar a partir de um certo índice? Caso tivesse 20 clientes e quisesse paginar de 5 em 5. Já vi que não posso usar o *ngIf usando o índice.
    Teria como fazer pelo angular ou teria que mandar um array já cortado pro ngFor?

    1. Olá Ronaldo,

      a melhor opção é sempre executar a lógica no componente ou serviço, então nesse caso você já deveria enviar para o *ngFor a lista somente com os dados a serem exibidos na tela.

  4. Olá!
    Pelo que eu entendi eu não consigo armazenar um cálculo de uma interpolação em uma variável, exemplo:
    50 + 100 = {{ 50 + 100 }}
    O resultado deste cálculo não seria possível armazenar numa variável?

    1. A interpolação deve ser utilizada somente para exibir valores, muito provavelmente esse tipo de cálculo que deseja fazer deveria estar dentro de um componente e não na view, que somente deveria exibir o valor previamente calculado.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

nove + 12 =