Aula-02 - MEAN Stack - parte IV - b2

Esta é uma pré-visualização de arquivo. Entre para ver o arquivo original

MEAN Stack 
Parte IV – Angular – b2 
Revisão - Amarrando Propriedades 
• xxx 
 
 
• “Property binding” se parece com isso. 
 
• Essa propriedade pode ser : 
• A propriedade de um elemento 
HTML padrão, por exemplo o “value” 
de um “input”; 
 
• Pode ser uma propriedade de nosso 
próprio componente; 
 
• A propriedade de uma diretiva; 
 
• Ao usar [property]=“expression” dizemos 
ao Angular que queremos amarrar 
(“trabalhar”) com essa propriedade, 
passando para ela o valor ou expressão 
entre “ ” 
• Pode ser uma string, um número ou 
mesmo um método, na qual o 
retorno é associado à propriedade 
 
Revisão - Amarrando Eventos 
• Xxx 
 
 
 
 
 
 
 
 
 
• “Event binding” se parece com isso.. 
 
• Aqui amarramos o evento que queremos 
usar, “click” por exemplo 
 
• Os eventos podem ser : 
• Um evento nativo ou do DOM, tipo 
“click”, “mouseover” e assim em 
diante 
 
• Pode ser um evento de nosso 
próprio componente; 
 
• Um evento de uma diretiva. 
 
• Ao usar (event)=“expression” dizemos 
que a “expressão” sempre vai ser 
executada quando o evento ocorrer 
• Pode ser uma chamada a um 
método ou um comando direto, por 
exemplo “=true” 
Revisão - Amarrando Propriedades e 
Eventos 
• E como vai ser a sintaxe disso no final das contas.. 
 
 
 
 
 
 
 
 
 
assinatura 
uso 
• Estou usando uma propriedade 
do meu componente 
• Estou usando um método do meu 
componente “disparado” pelo evento 
entre ( ) 
Directives 
• Já conversamos sobre Componentes 
 
• Sobre diferentes formas de fazer “data binding” 
 
• E agora precisamos conversar um pouco sobre 
“Diretivas” 
 
• Mas que raios são Diretivas? 
Directives 
• Diretivas são instruções no código que o Angular 
irá executar 
 
• As diretivas manipulam o DOM, permitem “mudar 
coisas” no DOM, o que faz a nossa aplicação 
dinâmica 
 
 
 
• Exemplo do *ngIf=“condition” 
 
• Podemos entender como: 
• Somente attach este elemento HTML 
(“section”) e seus childs no DOM se a 
condição, entre “ ”, for satisfeita 
 
• Neste caso, isto nos permite, de forma 
condicional, “attach” ou “detach” o 
elemento no DOM 
Entendendo Diretivas de Atributo 
• Angular já vem com várias Diretivas prontas (buil-in). 
 
• De forma geral temos 2 tipos de diretivas: 
– Diretivas de Atributo: que são anexados ao atributos 
normais do HTML e “mexe” com o elemento que está 
associado; 
 
– Diretivas de Estrutura: que também são anexadas ao 
HTML mas podem “mexer” com toda a estrutura do 
DOM 
 
 
 
 
Entendendo Diretivas de Atributo 
• Vamos analisar rapidamente como um Diretiva de 
Atributo se parece: 
• Qual o ponto a ser observado aqui? 
 
• Claro que podemos fazer essa 
aplicação do estilo de forma muito 
mais simples com CSS diretamente 
 
• Mas o legal aqui é que agora 
podemos ter uma propriedade 
associada que pode ser “setada” 
diretamente pelo meu componente 
• Em <article>, podemos ver um 
exemplo de uso de uma Diretiva de 
Atributo “bult-in” para definir o 
estilo da tag. 
 
• Entre “ ” podemos passar um 
objeto JavaScript que descreve 
“qual estilo eu quero mudar” 
 
• Por exemplo, podemos mudar o 
“backgroundColor” 
Exemplo usando CSS 
Entendendo Diretivas de Atributo 
 • Temos o mesmo exemplo mas agora 
a propriedade “color” é definida no 
componente e usado no html via 
“ngStyle”. 
 
• Agora temos dinamismo em vez do 
cenário estático anterior (em 
verde/comentado, no código abaixo). 
Vamos fazer juntos... 
Entendendo Diretivas de Atributo 
• Podemos melhorar um pouco mais o exemplo com 
um “Event Binding” 
 
• Vamos supor que: 
– temos um “mouseenter listerner” 
– e um “mouseleave listerner” 
 
• Para monitorar quando passamos o mouse sobre o 
elemento... 
 
 
Entendendo Diretivas de Atributo 
• sss 
• “color” é um atributo 
criado no nosso 
componente 
 
• Estamos “setando” ele 
pelo evento e a diretiva 
“[ngStyle]” está 
atualizando o estilo do 
“article” 
Vamos fazer juntos... 
Entendendo Diretivas de Atributo 
• Outro exemplo... 
Implemente o código 
Entendendo Diretivas de Estrutura 
• Ok.. Agora vamos ver alguns exemplos de Diretivas 
de Estrutura 
– Agora poderemos mudar a estrutura do DOM 
 
Por exemplo... 
 
 
 
• Vamos simular que temos vários mensagens no nosso “sistema”. 
 
• Para isso vamos criar um “vetor messageS” de “objetos Message” 
Entendendo Diretivas de Estrutura 
• Vamos usar *ngFor para imprimir as várias 
mensagens • Vamos incluir a diretiva “*ngFor” no seletor 
“<app-message>” para que ele possa 
renderizar toda as mensagens que estão em 
“messageS” • Vale lembrar que 
“messageVarClasse” é o atributo 
do “message.components” 
Implemente o código 
Entendendo Diretivas de Estrutura 
• O resultado é: 
 
Curiosidade: 
Nós temos * no início do comando para dizer para Angular que isto é uma diretiva de 
estrutura “built-in” de If ou For. 
Dessa forma temos além do *ngFor, teremos * para *ngIf 
Entendendo Diretivas de Estrutura 
• Exemplos de Diretivas de Estrutura: *ngIf 
Vamos fazer juntos... 
Entendendo Diretivas de Estrutura 
• Exemplos de Diretivas de Estrutura: *ngIf 
Vamos fazer juntos... 
Entendendo Diretivas de Estrutura 
• Exemplos de Diretivas de Estrutura: *ngIf 
Implemente o código 
Entendendo Diretivas de Estrutura 
• Exemplos de Diretivas de Estrutura: ngSwitch 
Implemente o código 
Entendendo Diretivas de Estrutura 
• Exemplos de Diretivas de Estrutura: ngSwitch 
ngModel é uma diretiva 
de atributo 
Implemente o código 
Adicionando Novos Componentes para Input e 
Lista 
• Pra fechar -> Importante para o Projeto... 
– Vale lembrar que desde o início estamos.... 
• Estudando várias coisas mas com o intuito de construir um 
projeto que implementa um sistema de mensagens (espécie 
de “chat”) 
• Já conseguimos “imprimir” várias mensagens  
 
– Agora precisamos para continuar: 
• Dar um restruturada no projeto para poder separar e escrever 
melhor a lógica do sistema 
• Verificar como podemos ter um componente específico para 
pegar os dados de input da mensagem e para lidar com uma 
lista de mensagens 
Adicionando Novos Componentes para Input e 
Lista 
• O resultado é.. 
message-input.component.ts 
message-list.component.ts 
a
p
p
.co
m
p
o
n
en
t.ts 
Adicionando Novos Componentes para Input e 
Lista 
• Vamos adicionar dois novos 
arquivos: 
– “message-input.component.ts” que 
vai ser responsável por criar novas 
mensagens ou editar as existentes 
 
– “message-list.component.ts” que vai 
ser responsável por armazenar a lista 
de mensagens 
• Até agora essa lista está no 
“app.component.ts” mas no app vamos 
ter outras responsabilidade a serem 
implementadas lá, logo podemos pensar 
em modularizar essa questão da lista de 
mensagem em um componente próprio 
Adicionando Novos Componentes para Input e 
Lista 
 
• “message-list.component.ts” vai ser 
responsável por armazenar a lista de 
mensagens 
 
• Para isso precisamos fazer o “loop” para 
carregar as várias mensagens 
• O código que já está pronto no 
“app.component.ts” vai vir para cá... 
• Tanto o “HTML” quanto o da 
classe 
Ajuste o código 
Adicionando Novos Componentes para Input e 
Lista 
 
• Já que criamos um novo 
componente.. 
 
• Precisamos registrá-lo no 
“app.module.ts” 
• Agora no meu 
“app.component.ts” 
 
• Eu vou chamar esse novo 
componente. 
• “message-
list.component.ts” 
Ajuste o código 
Adicionando Novos Componentes para Input e 
Lista 
• O resultado é a mesma coisa.. Mas agora com o 
projeto reestruturado... 
 
Adicionando Novos Componentes para Input e 
Lista 
• Agora vamos para o “message-input.component.ts” 
• Para este componente criamos o 
template em “message-
input.component.html” 
Ajuste o código 
Adicionando Novos Componentes para Input e 
Lista 
• Agora vamos para o “message-input.component.ts” 
• Registramos no “app.module.ts” 
 
• E atualizamos o “app.component.ts” 
para o componente poder aparecer 
Ajuste
o código 
Adicionando Novos Componentes para Input e 
Lista 
• O resultado é.. 
Adicionando Novos Componentes para Input e 
Lista 
• A última coisa que vamos fazer agora é “pegar os 
valores do input” digitado por um usuário e mandar 
imprimir no “console” -> Importante para o Projeto 
 
• Poderíamos fazer usando “[(ngModel)]” 
– Vamos fazer isso mais vezes mais pra frente... 
 
• Mas agora vamos apreender uma abordagem 
diferente... 
 
Para CASA... 
Adicionando Novos Componentes para Input e Lista 
 
• Podemos fazer uso a de uma referência local 
para o elemento HTML que estamos 
interessado usando “#nome-da-referencia” 
 
• Ao usar “#refLocalInputmyContent” teremos 
uma referência armazenada para este 
elemento “input” que poderemos usar em 
qualquer lugar no nosso template 
 
• Logo para o método “onSave()” podemos 
passar essa referência e com isso pegar o seu 
valor 
• No método agora basta definir a 
passagem de parâmetro 
Para CASA... 
Adicionando Novos Componentes para Input e 
Lista 
• O resultado é.. 
Para CASA... 
Atividades 
• Implemente os códigos abaixo, estude seu funcionamento 
e veja o resultado da execução 
 
 
Atividades 
• Implemente os código abaixo, estude seu funcionamento e 
veja o resultado da execução 
 
 
Atividades 
• Para fechar.. Implemente os códigos abaixo, estude seu 
funcionamento e veja o resultado da execução 
 
 
Atividades 
• Implemente os código abaixo, estude seu funcionamento e 
veja o resultado da execução