Curso Angular 2 – Aula 3: Exibindo dados

Curso básico gratuito de Angular 2 | kazale.comO objetivo da aula 3 é ensinar como exibir dados em um template com o Angular 2 usando interpolação e diretivas de atributos ‘*ngIf’ e ‘*ngFor’.

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

1. Exibindo propriedades de componentes por interpolação

Vamos começar pelo modo mais simples de exibirmos dados com o Angular 2, que é utizado a interpolação. A interpolação utiliza a notação de chaves duplas ‘{{ }}’ para exibir dados na tela.

As chaves duplas são bastante poderosas, elas suportam processamento de expressões, adição de filtros, porém nesse momento iremos somente exibir dados simples, expressões e filtros serão apresentados em outra aula.

Para começar precisaremos de uma aplicação conforme a criada na aula 1. Crie uma cópia dela e renomeie para angular2-aula3. Ela deverá ter a seguinte estrutura:

Com o projeto configurado, vamos editar o arquivo ‘app/app-component.ts’ e adicionar o seguinte código nele:

No código acima adicionamos dois atributos à classe, que são referenciadas em nosso template por interpolação. Repare em ‘template’ as entradas ‘{{titulo}}’ e ‘{{cliente}}’, elas serão responsáveis por exibir os dados contidos no componente.

Vale a pena falar que sempre que o valor de um dos atributos forem modificados, os valores na tela serão automaticaticamente atualizados.

Nosso template também está diferente desta vez, estamos usando ele inline, que significa definido diretamente na classe do componente. O TypeScrypt suporta múltiplas linhas utilizando a crase (`), assim não precisamos utilizar concatenação de strings, o que torna o código bem mais legível.

Execute a aplicação:

Ao abrir o navegador você deverá ver o título e nome do cliente exibidos na tela, caso contrário revise os passos anteriores.

Mas o que aconteceu ao carregar a página HTML?
Nosso ‘index.html’ possui a tag ‘<meu-app></meu-app>’, e assim que o Angular 2 é carregado e a função ‘bootstrap’ contida no arquivo ‘app/boot.ts’ é chamada, o Angular 2:

  • Percorre os elementos da página HTML
  • Encontra a tag ‘<meu-app></meu-app>’
  • Procura pelo componente associado a tag, no caso ‘AppComponent’
  • Instancia e chama o construtor do componente
  • Processa o template, fazendo o bind dos atributos
  • Insere o HTML do template processado dentro da tag ‘<meu-app></meu-app>’

2. Template inline ou em um arquivo?

O Angular 2 suporta templates inline conforme vimos no exemplo anterior ou em um arquivo externo.

A diferença para usar um ou outro está no atributo utilizado na anotação ‘@Component’. Templates inline usam o atributo ‘template’, enquanto que o template externo deve utilizar o atributo ‘templateUrl’.

Não existe uma resposta para o que é certo ou errado ou qual escolher, mas a recomendação seria utilizar o template inline somente quando o template for pequeno e não interferir diretamente na visibilidade do arquivo. E para templates grandes sempre use um arquivo externo.

Em nossas aulas utilizaremos ambos para você entender como utilizar ambos.

3. Construtor ou inicialização de atributos?

Podemos inicializar atributos de classe no TypeScript de duas formas, diretamente ao declarar o atributo, conforme fizemos no exemplo anterior, ou no construtor da classe conforme o exemplo a seguir:

Ambas formas estão corretas, e novamente não existe o certo ou errado entre qual escolher.

A recomendação é escolher a que achar mais conveniente, porém o importante é manter um padrão, seguindo a mesma escolha para que o código final fique conciso.

4. Usando o ‘*ngFor’ para exibir dados de arrays

A diretiva ‘*ngFor’ é utilizada para iterar sob array no Angular 2, onde a cada iteração o objeto selecionado é retornado em uma variável local.

Normalmente o ‘*ngFor’ é utilizado em elementos HTML de listagem de dados, como o ‘<li>’, ‘<div>’, ou ‘<span>’.

Vamos então ver na prática como ele funciona, adicionando primeiramente uma lista de clientes em nossa aplicação:

No código acima apenas adicionamos o atributo ‘clientes’, que contém um array de clientes, e atribuímos o primeiro cliente da lista ‘this.clientes[0]’ para o atributo cliente.

Ainda em nosso arquivo do componente devemos modificar o template para listar os clientes:

Execute a aplicação e você deverá ver na tela o título, o cliente selecionado, e uma lista com todos os clientes.

No código acima adicionamos uma lista de clientes utilizando o elemento ‘<li>’ do HTML. Repare que nele acrescentamos a diretiva ‘*ngFor’.

O ‘*ngFor’ contém nosso array de clientes definido no componente, e a definição de uma variável ‘cli’, o ‘#’ antes da variável indica que a variável deve ser local.

O ‘*ngFor’ então itera no array de clientes e para cada iteração atribui um cliente para a variável ‘cli’, que é exibida via interpolação em ‘{{cli}}’.

5. Iterando sobre um array de objetos

Vimos como iterar em um array de strings, agora vamos ver como iterar em um array de objetos.

Objetos são muito utilizados no JavaScript, e como estamos falando de clientes, nada melhor do que ter uma representação para ele.

Vamos criar um novo arquivo para representá-lo:

Edite o arquivo e adicione o seguinte conteúdo nele:

O que fizemos acima foi definir uma entidade cliente contendo dois atributos, ‘id’ e ‘nome’.

A sintaxe acima parece não fazer isso, mas é uma forma simplificada de criar uma classe com atributos em TypeScript.

Quando passamos no construtor os parâmetros no formato ‘public id:number’, o TypeScript irá na hora da compilação gerar o atributo automaticamente para nós, deixando nosso código mais enxuto.

No TypeScript poderíamos usar atributos private e getters/setters para acessá-los, mas isso seria vantajoso somente no desenvolvimento, uma vez que quando compilado o arquivo JavaScript teria seus acessos todos públicos.

Vamos agora utilizar nossa entidade de clientes, para isso edite o arquivo app/app-component.ts

Atualize também o atributo ‘template’ na anotação ‘@Component:

Repare como o código no componente ficou mais organizado, e perceba no template que passamos a utilizar o operador ponto ‘.’ para acessar os atributos do objeto cliente, como em ‘cliente.nome’.

6. Exibindo dados condicionais com o ‘*ngIf’

A diretiva ‘*ngIf’ serve para verificar se um elemento HTML deve ou não ser exibido na tela baseado em uma condição. Ele recebe como parâmetro uma expressão que será validada retornando verdadeiro ou falso.

O Angular 2 ele não só apenas esconde o elemento quando a condição for falsa, ele remove o elemento da página.

Para testarmos a diretiva ‘*ngIf’, iremos adicionar uma mensagem para quando nenhum cliente for encontrado, ou seja, quando a lista de clientes estiver vazia.

Adicione o seguinte código na definição do template:

No código acima adicionamos uma condição para verificar se a lista está vazia (clientes.length < 1), assim sempre que não existirem clientes para exibir na tela a mensagem ‘Nenhum cliente encontrado’ será exibida.

Execute a aplicação:

Repare que a mensagem não será exibida. Altere o componente para ter uma lista vazia:

Ao salvar o arquivo a aplicação será recarrega no navegador, verifique que agora a mensagem é exibida!

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

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

9 comentários em “Curso Angular 2 – Aula 3: Exibindo dados

  1. Prezado Kazale,

    Som profissional da área de Mainframe com 25 anos de experiência, detenho também conhecimento na área WEB, e estou procurando agregar conhecimento mais profundos e profissionais no ramo de tecnologia WEB.

    Muito legal esta iniciativa sua. As aulas e sua didática são excelentes. Espero ver e acompanhar as outras aulas que serão postadas. Vai arrebentar com seu método de ensino. Desde já agradeço pela abertura do conhecimento. Estou me aprofundando em AngularJS, NodeJs, Ionic, Java Professional, etc… Caso venha a postar a continuação das aulas e novos cursos, tenho certeza que a comunidade que lhe acompanha ficará agradecida. Parabêns por sua iniciativa e com certeza ganhará projeção no Brasil. Saudações.

  2. Kazale, muito bom o seu material e muito bem explicado. Obrigado pela iniciativa do curso e por o mesmo ser aberto! Tô no aguardo do novo post. Vlw!

  3. Show de bola o curso!!
    Só um ajuste: o arquivo “cliente.ts” tem um fechamento de chave a mais. O que da erro de Transpilação.
    Ajustado:
    export class Cliente {
    constructor(
    public id:number,
    public nome:string){}
    }

Deixe uma resposta

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

18 + 7 =