Curso de Angular | Saindo DO ZERO em 1 HORA

Quer aprender angler mas não sabe por onde começar esse vídeo é para você na aula de hoje a gente vai aprender a sintaxe básica dessa ferramenta e os conceitos essenciais para você criar o seu primeiro projeto com angler Então senta aí na cadeira e bora codar então antes da gente começar a criar o nosso primeiro projeto com angler entender mais sobre a sintaxe dessa ferramenta eu queria explicar Rapidamente para vocês o que é o angler Né do que que se trata o angler bom o primeiro ponto é que o angler é um Framework para desenvolvimento

de aplicações web e quando a gente fala de Framework a gente tá falando né de uma ferramenta que vai nos fornecer uma estrutura completa então um ecossistema completo pra gente desenvolver um projeto diferente de bibliotecas né as bibliotecas elas normalmente nos provêm ali um código né uma série de funções e Métodos pra gente fazer uma tarefa específica como por exemplo te o Wind né pra gente adicionar estilização na nossa aplicação ou o próprio jest ou pocu para testes unitários Isso é uma biblioteca resolve uma tarefa específica quando a gente fala de um Framework a gente

tá falando de uma ferramenta que vai nos dar um ecossistema completo para desenvolver um projeto completo Então os frameworks Normalmente eles são compostos por vários módulos cada módulo Ali resolvendo um problema para que tu Construa um projeto completo por exemplo no angler a gente tem o módulo de rotas para fazer o roteamento do nosso site criar né as páginas tem o módulo de requisições http tem o módulo para criação de componentes tem o módulo para criação de Services E por aí vai tem módulo para tu fazer configurações de microfrontend e várias outras coisas tá então

Ele nos provê um ecossistema completo para desenvolvimento de Aplicações web aplicações que vão rodar no Browser certo no navegador Além disso O angler ele é mantido pela equipe do Google o que que isso significa que todas as atualizações feitas no Framework são realizadas ali pelo um time do Google ou se não foram realizadas pelo time elas passam pelo crio do o time do Google passam pela avaliação deles antes de ser incorporada no Framework antes de ser incorporado na ferramenta isso traz uma base muito Sólida pro Framework porque tu tem ali uma grande empresa por trás

cuidando de todas as atualizações e mantendo aquele Framework Então isso é muito interessante tem outras frameworks muito populares no mercado Como por exemplo o nextjs o View e por aí vai que também tem uma comunidade muito forte por trás mantendo o Framework Então isso é muito importante no momento da gente escolher qual Fer frontend a gente vai usar é ver quem está por trás dessa ferramenta Então esses frameworks que Eu mencionei normalmente Ou eles têm uma empresa grande por trás né tomando conta ou tem uma comunidade muito forte por trás e isso traz ali uma

robustez né uma base sólida pra ferramenta porque a gente sabe que tem alguém ali olhando atentamente para isso e passando um crio em tudo que vai ser incorporado de novo dentro da ferramenta também cuidando para as partes de segurança etc então isso corrobora aqui pro nosso terceiro Ponto que é né o angular ele é uma plataforma sólida pra gente construir apps frontends robustos escaláveis e eficientes Então por ter Tod esse time da equipe do Google por trás ser utilizado em muitas empresas o angler já foi posto à prova muitas vezes e já foi incorporado várias

atualizações vários aperfeiçoamentos no Framework O que tornou ele cada vez mais uma plataforma mais sólida pra gente construir aplicações front end aplicações robustas Que a gente possa entregar PR os nossos clientes e ter ali milhões de clientes utilizando com funcionalidades complexas e etc e o Quarto e último ponto é que o angler ele Us usa bastante conceitos de programação orientada a objetos então se você ainda não conhece programação orientada a objetos Pode ser né que algumas coisas que a gente for vendo aqui ao longo do curso sejam novas para você você ainda não conhece esses

conceitos eu vou tentar explicar o Máximo mas é muito importante que você junto com seus estudos com angler combine os estudos de programação orientada a objetos e aqui no angler a gente vai utilizar o typescript então a gente não escreve código em JavaScript puro né a gente vai utilizar o typescript que vai adicionar ali a tipagem no JavaScript né E vai permitir que a gente utilize os conceitos de programação orientada objetos então entendido aqui a base do angler né do Que que se trata o Framework vamos começar criando o nosso primeiro projeto E para isso

a gente precisa de alguns requisitos então o primeiro requisito aqui é que vocês tenham o nodejs instalado na máquina de vocês porque o angler ele é um Framework JavaScript e pra gente conseguir rodar ele aqui na nossa máquina a gente vai precisar do node JS Então como é que vocês podem conferir se o node já tá instalado na máquina de vocês É só abrir o terminal Então abrir o terminal aqui no computador de vocês e rodar node menos menos version E aí vocês vão ver aqui que se vocês já tiverem o node instalado ele vai

retornar a versão que vocês têm aí do node eu tô com a versão 22.4.1 Mas vocês podem ter uma versão 18 ou mais nova né mas tem que ser a partir da versão 18 porque a gente vai trabalhar com a versão 18 do angler certo e aí pra gente ter compatibilidade entre o node e a versão do angler que a Gente tá usando a versão do node de vocês tem que ser uma versão a partir da versão 18.19.1 do node ou nova né ou mais nova ainda no meu caso aqui eu tô usando a 22

e aí a gente vai fazer a instalação da calai do angler como é que a gente vai fazer essa instalação a gente vai utilizar o npm que é o package Manager aqui do node Então é só aqui no terminal depois de verificar se o node tá instalado se você ainda não tiver o node Instalado eu vou deixar aqui na descrição do vídeo um passo a passo completo para você fazer a instalação que não cabe aqui no tema do vídeo Tá mas é algo super simples de fazer Não se preocupem depois de instalado o node a

gente vai instalar a Cal do angler E aí para isso a gente vai usar o npm e a gente vai fazer npm install Men G @ angler barcial Por que que a gente tá colocando esse Men G aqui é porque a gente tá instalando de forma Global Então a gente não tá instalando o angler somente nessa pasta onde a gente está quando a gente usa essa Flag aqui menos G do npm a gente indica aqui pro npm que a gente quer instalar essa biblioteca de forma Global aí dessa maneira a gente vai conseguir utilizar seai

do angler Independente da pasta que a gente ti tiver aqui na nossa aplicação na nossa máquina no caso então se eu tiver dentro da minha de trabalho ou na minha pasta downloads ou de qualquer outra pasta que Eu criei eu vou conseguir utilizar a c do angler independente disso porque ela ela foi instalada de forma Global na minha máquina se eu não botasse essa fag aqui ele ia ser instalado somente aqui na pastinha como se fosse no projeto onde ele está já tenho a c do angler instalado mas pra gente verificar se foi instalado com

sucesso é só a gente rodar ngg menos menos version aqui no terminal e ele vai retornar pra gente qual é a versão da cide do angler que a gente tem No local M eu tô aqui na versão 18.2.0 Então feito aqui esses requisitos a gente já pode começar com os tópicos aqui da nossa aula então o primeiro ponto que a gente vai ver é como criar um novo projeto utilizando angular E para isso a gente vai voltar lá no nosso terminal e a gente vai utilizar a calai para fazer a criação do nosso primeiro projeto

ular para quem não sabe quando eu falo calai eu tô me referindo a interface de linha de comando do angler Que basicamente é uma aplicação inha que a gente instalou aqui no nosso terminal vai permitir a gente gerenciar aplicações angler fazer a criação de novas aplicações inicializar elas etc então basicamente nos ajuda no desenvolvimento de aplicações angular tá isso é a c é interface de linha de comando linha de comando quer dizer isso aqui né o terminal onde a gente tá escrevendo os comandos Então a gente vai utilizar interface de linha de comando C Do

angler para fazer a criação do nosso primeiro projeto como é que a gente vai fazer isso a gente vai rodar NG NG por quê Porque a gente tá invocando A C do angler quando a gente escreve NG a gente fez uma invocação aqui que a gente vai usar a cai do Anger Se eu quisesse usar o node eu usaria node na frente então tô só explicando para quem não esteja muito familiarizado aqui com o terminal então NG New porque quero que a cai crie um novo projeto então o comando que a gente Usa aqui é

o new e a gente vai dar um nome para esse projeto eu vou chamar de meu primeiro app certo então NG New meu primeiro app vou dar um enter e ele vai me fazer umas perguntas né então a se alai do angular vai fazer umas perguntas pra gente para entender Qual é o estilo de projeto angular que eu quero criar porque tem algumas configurações que a gente pode fazer já aqui no momento de criação do nosso projeto que vão ali nos auxiliar depois né quando a gente for Desenvolver o projeto então primeira pergunta que ele

faz é qual formato de Style sheet eu quero utilizar porque não existe hoje somente um formato de escrever CSS né existe o CSS puro mas a gente poderia trabalhar com o sas a gente poderia trabalhar com o sas indentado com o les mas aqui no caso eu vou deixar CSS puro que não é o objetivo aqui do nosso curso entender formatações de está o sheet Então vamos deixar aqui com CSS puro vamos dar o a aí ele vai Nos perguntar se a gente quer habilitar ssr e ssg né server Side rendering e static Generation esse

é outro assunto também certo não cabe aqui nesse curso mas já tem uma live aqui no canal que eu fiz explicando o que que é ssr o que que é ssg eu vou deixar aqui no card para você assistir depois mas parte do princípio que esse é um conceito um pouco mais avançado para quem tá iniciando no frontend o angular por padrão ele é um Framework Spa single Page application Então se a gente não escolhe essa opção aqui o que ele vai criar aqui pra gente é um projeto Spa single page application aí eu já

explico o que é o spa mas saibam aqui que essa informação de ssr e ssg por hora a gente vai ignorar a gente vai botar como não mas já tem conteúdo aqui no canal vou deixar no card Então não vamos deixar ele criar com o formato padrão que é o formato Spa certo vamos dar o enter aqui ele vai iniciar a criação do nosso Projeto Então já tá mostrando aqui ó que ele tá criando todos os arquivos do nosso projeto os arquivos aqui da nossa aplicação que é a base inicial de todo o projeto angler

Então vamos esperar que ele terminar de fazer a criação e a instalação dos pacotes E aí a gente já volta quando ele tiver finalizado então eu já abri aqui meu vs code e vamos começar pelos arquivos que estão aqui na raiz do nosso projeto que não estão dentro de nenhuma pasta esse arquivo Aqui editor config ele diz respeito a configurações aqui da nossa ide certo do nosso editor de código então não é nada específico ao angler ele só vem configurado padrão Mas não é nada da aplicação angler em si e sim configurações aqui pra formatação

do nosso código o outro arquivo que tem aqui embaixo é o Git gnor esse arquivo aqui também não tem nada a ver com a aplicação angler ele é um arquivo do Git certo do nosso repositório Git Como Assim a l do angler quando ela cria um projeto novo ela já inicializa um novo repositório aqui do Git ele já cria que esse Git ignor pra gente basicamente o que esse arquivo aqui faz é ignorar alguns arquivos aqui dentro do projeto então basicamente aqui o que ele tá ignorando são arquivos de cche arquivos aros resultantes do build

ou arquivos específicos aqui do vest code tá como assim ignorando isso aqui significa que esses arquivos não estão comitados no Histórico aqui do nosso projeto e eles também não vão aparecer caso a gente faça alguma alteração neles exclua eles etc eles não vão aparecer aqui pra gente comitar não vão aparecer como alterados porque a gente não tá Traque eles aqui no nosso Git a gente tá ignorando eles porque são coisas que a gente não quer salvar no histórico ali do nosso projeto Tá e agora no arquivo aqui de baixo a gente começa a vir para

arquivos que são específicos de de projetos angler Começando por esse arquivo aqui angular.js esse arquivo aqui ele contém uma série de configurações do nosso app angler certo do nosso projeto o que que são essas configurações são configurações do nosso Build otimizações de código que a gente pode fazer configurações para iniciar o nosso projeto hler né quando inicie o servidor com serve e configurações aqui de teste né do comando de teste quais arquivos ele deve ignorar quais arquivos ele deve Olhar qual é a configuração do typescript esse tipo de coisa então aqui dentro do angular Jason

a gente consegue fazer uma série de configurações do nosso projeto angular E essas configurações vão ser levadas em consideração quando a gente for fazer o build quando a gente for fazer o server quando a gente for rodar os testes unitários inclusive aqui na parte do Build a gente pode colocar opções de build né trocar aqui essas opções de Build colocar né ali uma série de parâmetros que o angler tem para fazer otimizações ou fazer adaptações de acordo com a nossa necessidade inclusive colocar aqui limitações no tamanho do bundle final que é gerado caso a gente

Passe aqui por esse limite ele nos avisa ou dá um erro esse tipo de coisa então uma série de configs aqui que a gente pode fazer seguindo a gente tem o nosso package Lock e o nosso package Jason e são os arquivos aqui específicos do node Né do npm que vão ter as nossas dependências que o nosso projeto tá usando e os nossos scripts aqui que a gente pode usar na cai para rodar né o nosso projeto buildar ele rodar os testes unitários Enfim então isso aqui são coisas específicas do node e aqui dentro do

package Lock a gente nada mais tem do que a informação certinha de todas as versões que a gente instalou aqui na nossa máquina que tá dentro dentro aqui do nosso node mods tá todas As bibliotecas que o npm instalou pra gente aqui no package Lock tá contendo todas as informações das versões que tudo certinho das bibliotecas que foram instaladas embaixo a gente tem o rme que é o rme né não tem muito o que falar a gente pode usar como documentação do projeto enfim e por fim a gente tem aqui o nosso TS config esse

TS config é o arquivo que faz a configuração do typescript certo então são configurações aqui para compilação do typescript e Configurações também que a gente pode fazer de otimização e etc e inclusive aqui configurações específicas do angler certo da utilização do angler junto com o typescript Esse tsconfig.js é a configuração Global do nosso typescript configuração que se aplica todo o projeto e aí a gente tem o arquivo aqui tsconfig app. json e o ppec json o ponto app são configurações do typescript específicas pro nosso projeto certo que vão ser aplicadas no nosso projeto Quando a

gente tiver rodando ele e o ponto spec são configurações do typescript que vão ser aplicadas quando a gente estiver rodando o nosso teste unitário Então existe ali determin determinados momentos que a gente precisa diferenciar o ambiente de testes para um ambiente de quando a nossa aplicação realmente tá executando né precisa fazer configurações diferentes no typescript e aqui nesses arquivos que a gente coloca essas configs E aí Passado todos esses arquivos aqui que estão na raiz do nosso projeto a gente pode começar a dar uma olhadinha nas pastas começando pela pasta Public essa pasta aqui basicamente

ela vai conter imagens e assets estáticos da nossa aplicação e aqui no caso ele começou já com esse arquivo favicon né favicon nada mais é o iconeinstagram quando a gente abre o nosso navegador abre alguma página E aí tem a Tab lá em cima né fica o nome do Site que a Gente Tá acessando e um ícone bem parecido como fica aqui no vest code né o ícone que fica lá no navegador é o que a gente chama de favicon e aqui o projeto angler por default já vem com esse favicon aqui do angler vamos

deixar ele aqui mas quando a gente for fazer o nosso projeto mesmo dentro da nossa empresa ou de algum cliente nosso a gente vai substituir isso aqui e aí a gente chega enfim nos códigos Fontes aqui do nosso projeto que fica dentro da Pasta source E aí vamos começar pelos arquivos que estão aqui na raiz da pasta sorce começando pelo arquivo styles.css aqui a gente vai colocar toda a estilização Global do nosso projeto então tudo que é tipo de estilização com CSS que a gente quer aplicar para todos os componentes para tudo dentro da nossa

aplicação a gente deixa dentro desse arquivo Styles é o nosso arquivo de CSS Global aí em seguida nós temos o nosso main.ts esse main.ts é basicamente o Entry Point da nossa aplicação angler ele que faz o Bootstrap do nosso App angler ele que dá o pontapé inicial do nosso projeto angler inclusive Pass passando aqui Qual o componente que vai ser invocado e quais as configurações estão sendo passadas para ele e a gente já vai entrar aqui nesses dois arquivos também para entender o que que el do que que ele se trata E aí por fim

aqui na raiz da pasta sorce a gente tem o nosso arquivo P HTML esse arquivo index P HTML É o arquivo que vai ser renderizado lá pro nosso usuário quando ele acessar a nossa página né é o arquivo que vai ser chamado ali pelo browser e esse arquivo aqui index P HTML basicamente o que ele tá fazendo é aqui dentro do B Invocando o componente app root que é o primeiro componente aqui da nossa aplicação angular então sempre quando a gente inicia um novo projeto angular ele já cria esse componente padrão que é o componente

app e esse componente app Aqui é o componente inicial da nossa aplicação que vai fazer a Invocação dos outros componentes e a Invocação do nosso projeto para tudo ali todo o resto seja renderizado em tela então o index HTML é retornado pro cliente né retornado pro usuário isso aparece no Browser E aí o index HTML tá fazendo a Invocação né do Wap root beleza e aí o wap root dá conta ali de chamar os outros componentes montar as páginas enfim ali na tela pro nosso usuário Porque lembra que a gente tá usando um estilo de

de criação de aplicação frontend um método que é de spa lembra que eu tinha falado Spa significa single page application o que que isso significa que pro browser é como se ele tivesse carregado uma única página o browser vai requisitar somente esse arquivo index HTML e todas as navegações que o meu usuário fizer dentro do meu App não vão sair desse arquivo index HTML é tudo pro browser como se fosse o Mesmo arquivo index HTML como se ele tivesse sempre na mesma página por isso que se chama single page porque para quem não sabe antes

da criação desses frameworks frontend como é que a gente criava diferentes páginas ali no nosso aplicação front a gente criava diferentes arquivos HTML cada arquivo representando uma página E aí quando o usuário trocava de página então quando a gente trocava ali qual era a página que a gente queria acessar basicamente o que A gente fazia era utilizar o href ali uma Ancora alguma coisa assim para fazer navegação para um outro arquivo HTML e aí o browser requisitava esse outro arquivo lá pro servidor onde estava Nossa aplicação front E aí a tela era renderizada né a

outra página no caso aqui de aplicações Spa o browser vai requisitar somente esse index HTML e na visão dele ele vai estar sempre aqui nesse index HTML mesmo que visualmente o usuário tá trocando de página no fundo Dos panos ele tá sempre no mesmo arquivo HTML e aí quem vai fazer a renderização das páginas trocar as coisas em tela é o JavaScript a gente não vai estar trocando o HTML por baixo HTML puro né estático o que a gente vai tá fazendo é manipulando o que tá sendo exibido em tela a através do JavaScript então

por isso que se chama single page application a gente tem Teoricamente uma página única então a gente só tem um arquivo HTML e esse arquivo HTML é Manipulado pelo JavaScript E aí quando ele é manipulado vai tirando e colocando componentes E aí pro usuário parece que tá trocando a página mas na verdade é sempre o mesmo arquivo HTML que tá ali ele tá só sendo manipulado pelo JavaScript por isso que se chama single page application certo scpa tudo manipulado pelo JavaScript inclusive se a gente desabilita o JavaScript do browser nada mais AC acontece na nossa

aplicação não aparece nenhum componente Não aparece nenhuma tela nenhum nada porque quem cuida da renderização das coisas é o JavaScript é o JavaScript aqui os arquivos que a gente escreveu o próprio código fonte do hler que cuida disso pra gente renderizando as coisas se eu desabilito o JavaScript do meu browser eu já não vejo mais nada porque a gente tá falando de uma aplicação Spa eu vou mostrar para vocês isso daqui a pouco a gente vai executar o nosso projeto e vamos ver isso na prática mas Só para vocês entenderem o por só tem um

arquivo index HTML a gente tá falando de uma aplicação Spa aí entrando aqui por fim na pasta app dentro da pasta App a gente vai colocar os componentes da nossa aplicação Então os componentes que a gente for criar vão ficar contidos aqui dentro dessa pasta app E aí inicialmente o angler já criou aqui pra gente um primeiro componente que é o componente de app então é o app component se vocês verem aqui um Componente ele é composto por quatro arquivos eu arquivo appcomponent pcss appcomponent P HTML ppec e PTS são os quatro arquivos aqui que

compõem um componente aqui no angular a gente já vai entrar nesse assunto também quando a gente for criar o nosso primeiro componente mas só entendam que esses quatro arquivos aqui todos eles dizem respeito ao mesmo componente que é o meu componente app component e é o componente que contém o seletor appr Root né que tá sendo invocado aqui pelo Index HTML então o index HTML nada mais está fazendo do que invocando esse componente aqui tá E aí por fim a gente tem esses dois outros arquivos que aí sim não diz respeito a um componente tá

esse appconfig e aout PTS eles dizem respeito a configurações aqui do nosso projeto angler e não a um componente específico esse esse F config nada mais é do que um arquivo de configuração que vai dizer pro angular como ele deve Renderizar os nossos componentes Então quais providers ele deve injetar como é que ele deve fazer injeção das coisas porque o angler de novo Como Eu mencionei vai cuidar de toda a parte ali da renderização pra gente a gente não cuida disso né A gente só cria os nossos componentes escreve o nosso CSS o nosso HTML

Mas quem cuida ali de toda a estrutura da aplicação né a renderização dela etc é o angler então isso aqui diz pro angular Quais as configurações ele Tem que fazer para fazer a renderização do nosso projeto no caso aqui ó ele só tá injetando providers padrãos que é o de Change detection que é para detectar mudanças e então renderizar de novo e o provider route que é para prover as rotas da nossa aplicação Lembra que eu falei que o angler tem um módulo específico para fazer o roteamento Então tá aqui o provider route E aí

esse provider route nada mais está fazendo do que provendo as rotas de acordo com o Arquivo routes que é o nosso arquivo aqui app promt routes e vocês podem est se perguntando tá f mas tu não falou que era uma Spa uma single page application Como assim rotas como é que tu vai ter rotas tu só tem uma única página eu só tenho uma única página na visão do browser né Eu só tenho um arquivo HTML então pro browser parece que é uma única página mas o meu projeto angler ele faz essas páginas de forma

virtual usando o JavaScript né no caso typescript mas só Para vocês entenderem Então essas páginas elas são feitas de uma maneira virtual que a gente chama então aqui nesse app routes dentro desse arrei aqui depois a gente vai mapear as rotas da nossa aplicação E aí essas rotas aqui que estiverem aqui vão indicar Qual componente deve ser Render AD de acordo com a página né De acordo com a URL que o usuário acessou lá em cima pro browser de novo ele vai sempre achar que é o mesmo arquivo HTML Mas aí o angler vai Est

montando as telas Aqui de acordo com a configuração que a gente fez no routes a configuração nada mais vai fazer do que dizer assim ó quando usuário acessar o pf aqui de home né quando ele acessar lá em cima o Fernand ker.com barh eu quero que tu renderize O componente né o app component por exemplo ou o meu home component aí eu tô fazendo aqui o mapeamento E aí o angular vai cuidar de toda a renderização ali pra gente certo então isso aqui que a gente faz nesse Arquivo routes mas depois a gente vai ver

mais a fundo como é que funciona essas configurações Então beleza Ufa terminamos aqui todos a estrutura básica do nosso projeto angler eu quis passar aqui a fundo explicando para vocês porque eu sei que isso são coisas que confundem muito quando a gente tá começando Então eu acho que é muito importante vocês já começarem com o pé direito aqui no angular entendendo todos esses arquivos e porque que eles existem Então agora a próxima coisa que a gente vai fazer é entender como executar um projeto ular isso é bem simples então a gente pode aqui dentro do

vs code abrir um novo terminal vai abrir o terminal dentro do vs code Ou a gente pode usar o terminal que a gente estava usando Antes também tá não tem diferença aqui e o que que a gente vai fazer a gente vai rodar npm Run start esse comandinho aqui npm Run start basicamente vai acionar o comando aqui o script que tá escrito no Nosso Packet Jason que é o script de start vai fazer o NG serve o NG serve vai inicializar aqui na C do hler vai fazer o serve da nossa aplicação inicializar ela e

aí a nossa aplicação ela vai est rodando aqui na porta 4200 então quando a gente acessar local host porta 4200 a gente vai ver aqui a nossa aplicação então eu vou clicar Command vou abrir aqui no meu navegador e ele vai abrir aqui para mim uma aba no navegador a gente já consegue ver a Nossa aplicação angular rodando E aí a gente vê aqui que já tem algumas informações Hello meu primeiro app e aqui uns links enfim e aqui o próprio favicon que a gente já visto antes essas informações elas estão aqui dentro do app

component Então se a gente V aqui ó em appcomponent P HTML a gente consegue ver que tem coisas aqui dentro uma tag Style e tem uma estilização esse Main aqui com as informações os links que estão ali se a gente remover tudo isso Então vou remover primeiro o Style para vocês verem a gente já vai ver ele vai perder a estilização vai ficar tudo quebrado e feio se a gente ver agora e remover essa tag Main e tudo que tem dentro dela a gente vai ver que aí não vai ter mais nada sendo exibido ali

na nossa tela ficou vazio Se eu der aqui um Ctrl Z voltar com a tag Main ele volta a aparecer e se vocês perceberem também o angler tá fazendo Live Reload aqui pra gente então a gente já tá alterando e Ele já tá refletindo lá na tela pra gente beleza e uma coisa que eu tinha mencionado para vocês é aquele teste do JavaScript Lembra que eu falei que tudo isso aqui tá sendo renderizado pelo JavaScript só que não tá lá no nosso index HTML o index HTML tá invocando o nosso componente só que isso aqui

invoca uma coisa JavaScript Então se a gente desabilitar o JavaScript aqui no nosso browser a gente vai ver que nada mais será renderizado como é que a gente vai Fazer isso a gente vai vir aqui nesses duas setinhas vamos ah na verdade aqui ó nas configurações e vamos procurar por disable JavaScript Então a gente vai dar um check E aí vamos dar um Reload se a gente acessar o nosso app ó a gente consegue ver que não tem nada nada sendo exibido se a gente ver aqui na própria árvore de elementos da nossa aplicação a

gente consegue ver que tem esse App root aqui é o que o nosso arquivo index HTML tá chamando w root certo se eu trocar Aqui o nome o título da minha página por exemplo a Fernanda Kiper vai refletir então voltamos lá pro navegador damos aqui um Reload Ó Fernanda Keeper refletiu Então tá tudo certo o HTML por o JavaScript estar desabilitado é por isso que o resto das coisas não aparec é o que o que tá dentro lá do meu componente que é tudo manipulado pelo angler pelo JavaScript isso não é renderizado quando eu habilito

o JavaScript novamente Então vou lá Embaixo tiro o disable e dou um Reload aí ele volta a renderizar as coisas mostrar os componentes aqui em tela certo então isso aqui só para reiterar com vocês para lembrar né Sempre que é o JavaScript o angler usa o JavaScript typescript para fazer a renderização aqui dos nossos componentes em tela isso aqui o que a gente tá chamando de spa então voltando aqui pro notion podemos dar um ok em executar o nosso projeto e agora vamos entender como criar um novo Componente aqui no angular então voltando lá pro

vs code e abrindo aqui novamente o terminal o que a gente vai fazer é Rodar um novo comando aqui d c al do angler Então vou interromper a execução aqui do nosso projeto eu vou dar aqui um contrl C certo que ele faz o Exit E aí a gente vai utilizar se a light do angler para fazer a criação de um novo componente como é que a gente vai fazer isso a gente vai chamar de novo o NG e a gente a gente vai escrever Generate para el fazer a geração component né Eu quero que

ele Gere um novo componente E aí eu vou dizer onde eu quero que esse componente seja salvo qual p eu quero que ele crie aqui dentro da minha pasta app uma nova pasta chamada components e dentro dessa pasta components ele coloca o meu componente então para isso eu vou colocar aqui ó que eu quero que fique dentro de components bar home E aí o nome do meu componente vai ser home certo ele vai Pegar aqui a parte final ele consegue entender que isso aqui inicialmente é um pef E aí por último aqui é um nome

do componente Se eu quisesse só criar componente home aqui na raiz do meu App eu só colocaria aqui home ó eu dou um enter e a gente já vai consegue ver aqui aqui dentro da pasta app Ele criou aqui minha pasta home se eu voltar naquela outra abordagem então components bar home vocês vão ver que ele vai criar a pasta components e então colocar o Componente home dentro dela então vou dar um enter aí ele criou a pasta components e aí dentro de components Ó tem uma outra pasta que é a pasta home que aí

contém meu componente home então eu vou excluir esse outro home aqui que a gente criou fazer faz um delite aqui vou deixar só esse que tá dentro de components porque é um padrão aqui da comunidade do angler certo a gente criar os componentes da nossa aplicação dentro de uma pastinha components eu poderia Nomear essa pasta de qualquer outra coisa certo não precisa ser components aqui para ser a Live e funcionar mas o padrão da comunidade é chamar ela de components por isso que eu dei esse nome certo e aí a gente vai entrar aqui no

nosso novo componente vamos entender a estrutura básica agora de um componente aqui do angular então voltando aqui no notion podemos dar um ok na criação de componente vamos entender a estrut estrutura dos componentes Então vamos lá Os componentes como eu tinha mencionado para vocês eles são compostos aqui no angular por quatro arquivos começando pelo arquivo aqui de CSS é o arquivo que vai conter as estilizações desse componente então tudo que a gente quiser colocar relacionado a CSS para esse componente né para estilizar ele a gente coloca dentro do arquivo CSS dele certo é o arquivo

de Style sheet desse componente segundamente a gente tem o nosso arquivo HTML esse arquivo HTML vai Conter o template Desse nosso componente então geralmente vai conter ali as tags HTML né a estrutura HTML do nosso componente Porque mesmo que toda a renderização seja manipulada Via javscript mesmo que a gente esteja trabalhando com Framework javscript se a gente quer construir no final um projeto front end né uma aplicação frontend a gente tem que usar HTML tudo bem que é o JavaScript que vai injetar esse HTML lá no index depois e montar as coisas mas Tem um

HTML aqui certo e é aqui que a gente vai escrever o HTML desse componente seguindo a gente tem o nosso arquivo aqui de spec que é o arquivo de testes unitários Então por padrão aqui no angular ele já cria os componentes com um arquivo de teste unitário atrelado a ele e já tá fazendo um testezinho básico que é só vendo se o componente tá sendo criado né se a primeira renderização dele tá funcionando se o componente não tá Quebrando por assim dizer então já venho com esse testezinho aqui básico e por fim a gente tem

o arquivo aqui typescript do nosso componente esse arquivo typescript é a classe que vai representar o nosso componente então é que dentro dessa classe que a gente vai deixar a lógica do nosso componente todas as coisas dinâmicas que ele vai fazer se vocês perceberem ele tem aqui Um Export Class E aí o nome do componente né component E aqui dentro Dessa classe que a gente vai colocar as lógicas do nosso componente a dinamicidade do nosso componente mas isso a gente vai ver em seguida em cima dessa classe vocês devem ter percebido que tem esse decorador

aqui um tanto engraçado né um tanto estranho para quem não conhece decorators ainda que esse é @component esse @ component basicamente o que ele tá fazendo é indicando pro angular que essa classe aqui ela representa um componente né porque eu Posso criar um arquivo typescript aqui qualquer meu arquivo e ele ser um arquivo P TS e eu criar aqui uma nova classe eu posso fazer isso criar uma nova classe typescript Só que essa classe aqui ela não representa um componente como é que eu sei que ela não representa o componente porque ela não tem o

decorator de componente então quando eu quiser que uma classe represente um componente ela tem que ter esse @ componente em cima para quando o Angular for fazer a renderização na nossa aplicação for montar a nossa aplicação em tela ele consigue entender o que que cada arquivo representa e essa decoração aqui @component basicamente tá compondo O componente Então tá dizendo ó Qual é a URL do template desse componente Ah é bar.com.mpb desse arquivo HTML aqui qual é o Style sheet né da onde eu pego o arquivo de estilização desse componente Ah tá dentro de home. component.css

Então a gente faz o mapeamento de todo o nosso componente aqui dentro e aí tem mais algumas configurações aqui a gente tem essa configuração de selector que é o seletor que a gente chama que é como a gente vai se iria esse componente quando a gente quiser utilizar esse componente em outro componente então lembra aqui ó que a gente tem o nosso app component e o seletor desse app component é root se a gente quisesse utilizar o nosso componente de home aqui dentro do nosso App component que foi o nosso componente inicial a gente tem

que ter uma forma de usar ele chamar ele e a gente faz isso através do seletor eu já vou mostrar como é que a gente vai fazer isso lá no HTML depois mas vocês T que entender que esse seletor é basicamente para que outros componentes depois consigam se referir a esse componente e aí seguindo a gente tem essa configuração aqui Stand Alone que basicamente é pra gente utilizar componentes que estão Stand Alone que não tem não possuem módulos Isso aqui é uma coisa nova no angler certo antes o angler funcionava tudo com módulos então todos

os imports que a gente precisava fazer para um componente os providers que a gente precisava dar para ele a gente precisava que ele tivesse um módulo atrelado E que esse componente tivesse declarado dentro do módulo para ele consumir ali os providers e os imports daquele módulo com o standalone components agora a Gente não precisa mais mais que um componente seja declarado dentro de um módulo do angler todas as declarações do que que esse componente utiliza pode ficar aqui dentro do próprio componente né contido no componente e é contido dentro desse Array aqui de imports então

tudo que o meu componente for usar de módulos extras do angler eu coloco aqui dentro de imports ou de outros módulos que eu criei né módulos terceiros por exemplo então se eu quiser usar o common Mod do angler eu boto aqui nos imports o comon Mod e eu já consigo usar todos as funções enfim que vem desse comon mod do angler se eu quero usar por exemplo o router module né o módulo de roteamento do angular para fazer alguma configuração específica eu importo coloco aqui nos imports a minha classe já vai ter a visão já

vai conseguir usar tudo que vem lá de dentro desse módulo se eu quiser utilizar um módulo de uma biblioteca terceira por exemplo a Biblioteca xyz né eu fiz o instal dela aqui no meu projeto e quero usar e ela exporta o módulo angular eu importaria aqui né O xyz module que vem dessa biblioteca eu conseguiria usar as funções as classes que vem lá desse modo certo sem dar erro aqui no ângulo então basicamente nesse imports a gente vai usar para importar as coisas que o nosso componente vai usar certo as coisas aqui empacotadas em formatos

de de módulos certo módulos e Services enfim Então Essa é a estrutura básica de um componente aqui do angler a gente já pode dar um ok aqui na estrutura dos componentes agora a gente vai entender como é que a gente pode usar esse componente então a gente criou um componente Zinho vamos vir aqui no HTML e vamos trocar para um oi do vídeo certo e agora eu quero fazer com que esse Oi do vídeo seja exibido lá no nosso navegador eu quero tirar essa coisa aqui para padrão que veio do angler e eu Quero que

ele exiba o meu componente o meu componente de home tá dizendo oi do vídeo como é que a gente faz isso então pra gente conseguir utilizar esse componente que a gente criou dentro de outro componente tem basicamente dois passos que a gente vai precisar fazer o primeiro deles é entrar no componente no qual a gente quer utilizar esse outro componente a gente entra nele e aqui dentro do Array de imports desse componente a gente vai ter que colocar o Nome do componente que a gente acabou de criar que no caso é o home component então

basicamente o que eu tô dizendo é que o Epic component vai utilizar o home component né ele precisa tá dentro aqui dos imports E aí agora eu tenho que ir lá no template do meu componente app aqui no HTML dele que é o template que a gente chama e chamar o meu componente home através do seu seletor Então vou vir aqui excluir tudo que tinha né que o angler colocou por padrão pra gente Colocar somente o seletor aqui do nosso app home Então vou vir aqui vou colocar app home fechar aqui a tag e a

gente utiliza os componentes em formato assim a gente coloca o nome do seletor E aí nessa estrutura aqui de tag como se fosse uma tag HTML e agora se a gente executar o nosso projeto Então vamos dar um Clear aqui npm Run start certo e abrir lá o nosso navegador a gente já vai ver aqui o nosso Oi do vídeo nas duas Abas que já estava aberto Oi do Vídeo que tá mostrando o nosso componente lá o nosso componente home Se eu mudar aqui ó oi do V volto aqui e ele trocou certo o meu

componente é já tá conseguindo utilizar o meu componente home mas eu vou mostrar mais umas coisas aqui interessantes para vocês certo nesse tópico Olha só se a gente entra aqui no template do nosso componente app a gente vai ver que é embaixo do nosso app home tem esse router outlet aqui esse router outlet é o output das rotas Do angler lembra que a gente viu esse arquivo aqui app. routes.ts esse arquivo app. routs PS mapeia as rotas o que que é esse mapeamento das rotas basicamente é dizendo Ah para o pef tal utiliza o componente

tal né como eu mostrei para vocês no nosso caso a gente não tem nenhuma rota aqui dentro então se eu vier aqui no meu App com component no template dele excluir esse hter outlet nada vai acontecer lá na minha tela né vai continuar como está mas se agora eu Vier aqui remover o meu App Home de dentro do meu App component deixar vazio ele não vai mostrar mais nada beleza mas agora eu quero vir aqui no meu App routes e mapear uma nova rota quero fazer o mapeamento de uma rota onde eu vou colocar aqui

que o pef é o pef vazio né o pef padrão que que é o pef vazio É aqui o pef Rot da nosso domínio no caso o root da nossa aplicação que não tem nada aqui depois da URL né Eu não tô colocando nenhum nome depois da URL Nenhuma seleção de de pé tô só acessando o root do nosso domínio esse PF root aqui vazio eu quero que ele sempre exiba então sempre exiba o componente home component então ele teria que funcionar né Teoricamente voltando aqui a gente vai ver que não vai funcionar não tá

exibindo o meu home component por quê Porque lá no meu App component eu removi o router outlet do template Então eu tenho que deixar esse router outlet aqui no template do app component se eu quis É que as rotas sejam refletidas agora voltando eu consigo ver ó que o oi do vídeo tá aparecendo se eu vier aqui trocar minha rota para aqui no pef vazio ele exiba um outro componente eu viria aqui e alteraria se eu quiser colocar para esse meu home component ser exibido também no meu pef barra home eu venho aqui mapeio em

Barra home eu quero que ele seja exibido eu não preciso colocar a barra na frente é só colocar o nome do pef aqui e aí se eu acessar lá no meu Navegador bar home ele vai continuar exibindo o nosso Oi do V vídeo porque tá mapeado essa rota para esse componente aqui se eu tentar acessar uma rota diferente né vou botar qualquer coisa aqui El não vai mostrar nada né mostrou vazio e deu um erro né provavelmente deve ter dado um erro aqui porque ele tá mostrando do vazio inclusive nem mostrou nada do nosso home

component ele disse ó error runtime cannot match Any routes então ele não conseguiu fazer nenhum Match dessa desse PF aqui com alguma rota que tivesse mapeada aqui no meu arquivo de configuração de rotas né então isso aqui deu um erro e aí se a gente perceber ele acaba acou quebrando né A minha aplicação angular e mostrando aqui um vazio mas se eu der um Reload ele vai mostrar meu home component porque ele vai ter um match aqui desse pef root com meu home component aqui então Teoricamente era para ele exibir nosso home component tá demorando

um Pouco aqui ó oi do vídeo e se eu acesso agora a outro PF que não existe né Por exemplo não existe ele dá o erro de novo e vai quebrar e provavelmente vai mostrar ali no console log né que ele não conseguiu fazer o match desse não existe com alguma rota lá então beleza entendemos como utilizar esses nossos componentes inclusive Como utilizar eles dentro de um outro componente e como utilizar eles aqui nas rotas então a gente pode vir aqui no notion D um ok Pro utilizando componente Inclusive eu vou botar aqui um subtópico

né que foi através das rotas simples né então a gente aprendeu Como utilizar aqui as rotas simples do ângul próximo tópico que a gente vai entrar agora são os estados de um componente do angular o que que são esses estados aqui que eu quis dizer bom dentro de componentes aqui no angler né dentro das nossas classes que representam os nossos componentes a gente pode ter informações Que são dinâmicas então a gente pode ter por exemplo um título que vai ser exibido em tela a gente pode ter o leano que a gente faz alguma validação algum

condicional esse tipo de coisa então isso são o que a gente chama de Estados e a gente pode colocar estados dentro do nosso componente através da declaração de atributos da nossa classe então se eu vier aqui criar um novo atributo que eu vou chamar de meu boleano e dizer que esse meu boleano tem um valor fals eu Criei um estado aqui para esse meu componente é o estado aqui meu boleano Inclusive eu posso criar um método dentro desse componente que é o atualiza boleano por exemplo e esse atualiza boleano ele recebe um valor e atualiza

o meu boleano com esse valor então ele vem aqui e faz dis P meu booleano para pegar aqui o atributo dessa minha classe recebe o valor Inclusive eu posso vir aqui colocar aqui esse meu valor né Ele é do tipo buam ou boleano né não dá erro De tipagem aqui então eu criei um método que recebe um parâmetro tipe esse meu parâmetro falando que ele é um boleano E aí eu atribui esse parâmetro ao meu atributo meu boleano né que eu já tinha criado aqui se a gente colocar o mouse em cima a gente vai

ver aqui ó que o próprio vs code mostra pra gente que isso é uma propriedade da nossa classe da classe home component né uma propriedade dela e o tipo dessa propriedade é um bullan se eu troco aqui Esse false né no momento da declaração dessa variável pela primeira vez se eu troco o false para uma string por exemplo Fernanda eu vou botar o mouse aqui por cima a gente vai vai ver ó que a propriedade Mudou pro tipo string e quando eu tento fazer essa atribuição aqui de um valor boleano paraa minha variável ele começa

da erro ó ele diz ó o Type bullan não pode ser atribuído ao tipo string então aqui a gente pode criar estados dentro dos nossos Componentes e inclusive fazer a atualização deles a manipulação deles mas sempre respeitando os tipos né a gente tá trabalhando aqui com tipagem usando o typescript Então a gente tem que estar muito atento a isso isso é algo que confunde bastante o pessoal que tá acostumado com JavaScript puro vem aqui e acha que consegue ficar atualizando aqui os dados fazendo as transformações né em runtime mas com typescript não é assim a

gente tem que Respeitar as tipo E caso a gente queira fazer um C C seria mudar o tipo de uma variável a gente vai ter que fazer isso explicitamente tipo mostrar pro typescript que a gente quer mudar o o tipo do dado fazendo só assim ele não vai deixar né ele vai dar erro tá dizendo que a gente tá tentando atribuir um valor boleano para uma variável que é do tipo string mas se eu trocar esse valor aqui para um tipo N aí eu posso atribuir aqui o valor pro meu boleano Porque o n acaba

dando met com qualquer coisa aí eu vou acabar mudando o valor vou conseguir mudar se eu mandar aqui um valor boleano ele vai mudar lá varável vai alterar Sem problema não vai quebrar mas o o problema que de eu usar sempre os valores n né utilizar essa tipagem de n é que aí dessa maneira eu não tô fazendo o melhor uso da tipagem aqui na minha aplicação porque depois alguém pega esse código aqui para ler e não consegue entender que tipo de valor pode Vir aqui esse valor tem que ser sempre uma string porque aqui

tu tá declarando inicialmente como uma string ou pode ser um boleano porque o nome da variável é boleano que que eu posso passar aqui pro parâmetro o que que eu devo respeitar aqui para essa variável pro meu componente não quebrar isso são um tipo de informações que uma tipagem bem definida nos ajuda a compreender de forma mais fácil tá então a gente sempre tem que usar os tipos aqui o nosso favor Então respeitando os tipos se eu crii uma variável boolean aqui sempre usando a tipagem do boleano né e respeitando sempre quando eu for fazer

a atualização desses meus estados Então beleza entendemos como fazer a criação de estados aqui nos nossos componentes no angular né inclusive como atualizá-los e agora a gente vai entender Como exibir esses valores aqui esses dados dinâmicos que estão dentro do da minha classe que representa o meu componente lá no nosso Template como que a gente pode pegar as informações que estão aqui na classe do meu componente e renderizar lá no template do meu componente você não precisa de um curso para aprender a programar você sabe muito bem disso porque eu sempre bato nessa tecla aqui

no canal porém um curso pode te dar mais direcionamento caso você esteja no começo ou esteja estagnado para você aprender padrões que são utilizados no mercado e evoluir de uma forma mais Rápida por isso eu vim mencionar rapidamente para vocês sobre a nossa patrocinadora que é a Rocket City para quem não conhece a Rocket City é uma escola de programação na qual eu sou ex-aluna Então aprendi a programar react e nodejs lá na Rocket e agora nesse mês de novembro eles estão com a maior promoção do ano que é de black friday onde assinatura do

plano Rocket City One que vai te dar acesso a todas as trilhas dentro da plataforma incluindo trilhas De Java react nojs react Native EA devops Python e go e várias outras com conteúdos estão com desconto de 25% na assinatura de 1 ano e 50% de desconto nas assinaturas de 2 anos e além disso a gente tem um cupom especial aqui do canal que é o kerd 5 que vai te dar mais 5% para você fechar sua assinatura com aquele Descontão eu vou deixar o link aqui na descrição do vídeo e aproveita esse momento se você

tá buscando um curso para se especializar e se Diferenciar no mercado agora bora continuar o conteúdo e agora continuando aqui os nossos tópicos a gente vai entender como é que a gente a gente utiliza atributos dinâmicos no angler e primeiro a gente precisa entender o que que são atributos dinâmicos então às vezes a gente quer modificar o nosso HTML né os atributos do nosso HTML dinamicamente então tem alguns algumas informações que a gente pode passar PR os nossos elementos HTML que a gente Pode querer obter essas informações lá da nossa classe né da classe do

nosso componente por exemplo né um elemento que que é um botão ele pode conter o atributo de area Label por exemplo esse atributo aqui se eu colocar ele direto aqui no meu template HTML né botar aqui o atributo ele vai ser um atributo estático então eu tô declarando aqui ele estaticamente no meu HTML mas se eu quisesse que essa informação aqui que eu atribuí ao are Label viesse lá do meu da Minha classe né do meu home component eu estaria fazendo um atributo dinâmico que a gente chama Então pegando isso dinamicamente lá da nossa classe

só que tem aqui um problema o que a gente pensa aqui em fazer bom naturalmente a gente vai pensar em vir aqui e colocar né as chaves D duplas para tentar passar um valor aqui de ar Label para esse nosso botão certo de forma dinâmica só que aí vai dar erro não vai funcionar E por que que isso acontece porque esses atributos Aqui do tipo area né E também aqueles datas a gente não consegue passar dessa forma se eu tivesse usando um atributo que é mais padrão assim por exemplo o ID eu conseguiria usar com

as chaves duplas eu venho aqui boto que o meu botão tem um ID personalizado e pega esse valor lá do meu template né Posso botar aqui meu ID Button e declarar isso aqui no script e utilizar lá no nosso template HTML isso aqui funcionaria certo Inclusive a gente pode abrir aqui o browser para ver Ó se eu vier aqui pressionar né olhar esse meu botão a gente vai ver que ele tá aqui com o ID que eu coloquei perfeito mas aquele atributo lá queero que a gente estava usando antes ele não funciona dessa forma a

gente não consegue usar assim pra gente conseguir fazer o bind né dessa informação que tá vindo lá da minha classe para dentro desse atributo area Label a gente vai precisar de uma abordagem diferente que é a seguinte ó ao invés de usar Chaves A Gente vai usar colchetes Só que os colchetes vão ficar em volta do nome do nosso atributo aqui eu vou trocar para colchetes e vou tirar as chaves aqui e ao invés de Chaves vou colocar uma string certo aqui eu vou botar a de buton E aí na frente desse are Label eu

vou colocar esse prefixo aqui que é o att att ponto certo que eu tô acessando o attribute atributo area Label e passando o valor aqui de ID buton eu volto aqui pro HTML dou uma inspecionada Na nossa página ó a gente já consegue ver ó que ele tá com o ar Label aqui que a gente passou porque esse atributo que area Label é um atributo que não é dos defs aqui do dos elementos HTML Mas eu posso fazer a mesma abordagem para os atributos default por exemplo se eu quisesse passar um ID né que nem

eu tinha dado o exemplo antes eu posso vir aqui e trocar esse attr P Label para só ID deixar o ID entre colchetes E aí usar assim no formato de string vai continuar Funcionando então se a gente volta lá pro nosso HTML certo ele continua aqui aparecendo aparecendo aqui então isso aqui funciona mas os nossos atributos dinâmicos Como por exemplo o wir Lab não funcionaria eu posso inclusive passar um atributo que eu inventar então eu posso vir aqui ó att P test do vídeo é um atributo que eu criei é um atributo dinâmico lembra que

eu falei ó não é um atributo defa do elemento HTML eu criei aqui um atributo teste do vídeo se eu Ver aqui especional os meus elementos HTML e olhar pro nosso botão a gente vai ver ó que ele tá aqui com o atributo teste do vídeo Então essa é a diferença quando eu tô usando um atributo que é defold de elementos HTML né que vem do HTML mesmo é nativo do HTML vamos dizer assim como por exemplo o de por exemplo também o Class né que é as classes esses tipos de atributo que são nativos

do HTML eu posso usar dessas duas formas ou com o colchetes ou com as chaves duplas Como eu tinha mostrado Mas quando são atributos dinâmicos como por exemplo os areas os datas esse tipo de coisa que a gente usa às vezes paraa acessibilidade da nossa página ou para alguma manipulação do teste unitário ou para alguma outra manipulação que a gente vai fazer esses atributos que a gente cria ou que são convencionais mas não são nativos do elemento HTML a gente tem que utilizar esse formato aqui de ATT R ponto e aí o nome do atributo

E aí a Gente consegue fazer a injeção do valor para ele certo se a gente não tivesse passando um valor dinâmico eu só declararia aqui um atributo né meu atributo botaria aqui no no meu HTML e segue vida não é um valor dinâmico eu sigo fazendo como eu faria no HTML normalmente mas como eu tô tentando pegar um valor que tá lá na classe eu tenho que seguir essa abordagem certo e aí pra gente finalizar essa questão aqui dos atributos dinâmicos tem um outro Tópico que eu queria abordar com vocês é como é que a

gente faz a injeção das nossas funções né como é que a gente a gente faz aqui a injeção de funções para reagir a eventos e por exemplo o nosso botão aqui Button ele tem um evento que a gente gosta muito de reagir que é o evento de clique quando um botão é clicado normalmente a gente quer reagir a isso né a gente quer fazer a chamada de uma função quer que dispare alguma coisa então pra gente fazer isso aqui no Hler O que que a gente vai fazer a gente pode ter um método aqui na

nossa classe que é o meu método submit por exemplo esse Meu método submit ele vai só fazer um conso log Então vou botar aqui conso log vídeo E aí para eu conseguir acionar esse submit através do clique desse botão como é que a gente vai fazer a gente vai vir aqui no botão e vamos mapear esse evento para chamar o nosso método então a gente vem aqui e mapeia aqui o evento clique deve chamar o Nossa Função submit certo fazer a chamada dela só que não é só a gente colocar dessa maneira Isso aqui vai

ficar estático não vai fazer o acionamento do nosso método lá que realmente tá dentro da classe ó isso aqui não vai funcionar se a gente tiver aqui testar certo clicar no nosso botão aqui ó tá no conso não vai funcionar certo só que não funciona porque o hler não tá entendendo que a gente tá querendo né injetar um método que existe lá dentro da nossa classe pra Gente deixar claro pro angler para ele conseguir fazer isso a gente tem que colocar aqui ao em volta do nosso evento que a gente tá querendo observar os parênteses

então aqui a gente utiliza parênteses certo e aí dessa forma ele já Reconhece aqui ó que esse submit é uma função e aí agora se eu volto lá pro nosso HTML aqui ó clico no nosso botão né ele já aparece vídeo vídeo vídeo porque agora tá funcionando se eu tento colocar aqui um método que não existe Então aqui ó método não existe ele já vai dar erro Por que que ele vai dar erro porque aqui eu tô dizendo ó que eu vou fazer um bind de um método que tá lá dentro da classe só que

tu tá tentando fazer um bind de um método que não existe o método que não existe não existe lá no teu home component então a gente faz dessa forma e se vocês perceberem eu não coloquei aqui na frente um click eu coloquei só Click né esse é o nome aqui do evento pro angular Então volto aqui ó dou Reload né da nossa aplicação tento clicar ele não vai funcionar porque o nome do evento aqui pro angler não é on Click é só clique né o nome do evento como é que a gente pode saber aqui

os nomes dos eventos pra gente utilizar nos nossos templates HTML para conseguir fazer o mapeamento correto a gente pode vir aqui no Google procurar né Por HTML events angler e ele vai ter aqui ó nosso event binding que é o que a gente tá fazendo né a gente tá Fazendo binding de um evento e ele tem aqui vários exemplos né de eventos que a gente pode mapear inclusive algumas outras informações né de como é que a gente passa um parâmetro nessa chamada e etc e eu vou mostrar para vocês como é que a gente faz

isso Ó a gente volta aqui no nosso código e se eu quiser Pass passar aqui por parâmetro na chamada desse método o evento em si então sabe quando a gente para um evento HTML ele gera ali um objeto que contém Informações daquele evento se eu quiser passar o contexto desse evento para lá dentro do meu método né para usar essas informações eu posso vir aqui ó e colocar cifrão event passando como parâmetro E aí lá no meu método eu tenho que mapear que ele vai receber esse meu event certo o eventos aqui que eu vou

colocar do tipo N E aí eu posso inclusive fazer um conso log desse evento para vocês verem como é que que chega esse parâmetro lá no nosso método Então se a gente abre aqui ó clicar ele tá vindo ó o evento certo um objeto aqui que representa né o contexto desse evento Inclusive tem informações né sobre a posição desse botão Qual foi o botão que acionou esse evento e esse tipo de coisa se a gente tivesse escutando por exemplo um evento de submit né viria as informações do formulário aqui né então mesma coisa que a

gente faz no HTML normal de manipular o evento né de ter as informações de Evento a gente faz aqui no angular e pra gente receber essas informações é Us usando esse cifrão evento aqui que é o angler vai injetar para nós o contexto do evento da mesma forma como a gente faz com todos os eventos do HTML com o mouse on Mouse over o submit o on Click todos esses eventos que existem no HTML a gente consegue fazer aqui no angler e receber ele de parâmetro aqui pro nosso método pra gente manipular dessa maneira aqui

então podemos dar um ok Aqui também Já entendemos como é utilizar os atributos dinâmicos e agora a gente vai passar pra parte dos Loops e condicionais então voltando lá pro nosso código Vamos começar com os condicionais mais então digamos aqui que eu tenho um valor boleano certo que V representar aqui por exemplo Deve mostrar né vou chamar de Deve mostrar título Então vai ser o nome aqui do nosso bolean Deve mostrar título e ele vai começar como false aí lá no meu template HTML eu Quero mostrar um título né Eu quero exibir o título pro

usuário somente se a minha variável Deve mostrar título né se meu atributo Deve mostrar título for verdadeiro se não for verdadeiro eu não quero mostrar como é que a gente faz isso a gente vai utilizar aqui os condicionais do angular no caso é através aqui da sintaxe dos ifs Então a gente vai usar aqui o @if Então dentro desse @if no bloco if a gente vai colocar a nossa condição então se eu if Deve mostrar título então eu vou exibir o meu título vou abrir aqui as chaves para fazer a exibição eu vou botar aqui

por exemplo um H1 meu título fiz um condicional voltando lá pro navegador a gente não deveria estar vendo o nosso título certo agora se eu trocar aqui o Deve mostrar título para true a gente deveria visualizar o título então aqui ó meu título perfeito tá funcionando só que agora Digamos que eu quero adicionar uma condição else né então se for Verdadeiro mostra se não né Se tiver um ELS então eu boto aqui um @ else eu posso colocar um outro comportamento então caso não seja verdadeiro eu boto aqui não foi verdadeiro por exemplo voltando lá

a gente continua vendo o meu título né porque tá verdadeiro agora se eu troco para false ele vai me mostrar ali o não foi verdadeiro Beleza então a gente consegue criar as estruturas condicionais aqui no angular usando esses esses blocos de if else Inclusive A gente tem também bloco de else if eu posso colocar aqui um else if certo então se não for verdadeiro mas o name for igual a Fernanda então mesmo assim eu quero mostrar então aqui eu vou botar o meu título para Fernanda e aí se eu troco lá o meu name pra

Fernanda aqui ó Fernanda ele vai mostrar o meu título para Fernanda ó meu título para Fernanda porque caiu no bloco ali do elsif certo então essa estrutura aqui de Hi fiz do angular e tem um ponto aqui muito Importante tá você que tá assistindo de agora essa é a estrutura de condicionais do angular das versões mais recentes do angular antigamente né nas versões mais antigas não se fazia dessa forma então se você tiver trabalhando com uma versão 13 12 por exemplo né ou até as versões mais antigas ainda do angler talvez você veja os condicionais

nesse formato aqui ó Então a gente vai criar por exemplo aqui o meu título certo vou criar deixa eu dar um cont Crol Z vou pegar aqui o Meu título certo vou vou colocar ele aqui e para eu exibir isso aqui de forma condicional como é que a gente fazia no ângul antig a gente colocava assim ó asterisco NG if E aí aqui colocava qual era a condicional que a gente queria observar que é o Deve mostrar título E aí funcionava dessa maneira é as diretivas aqui do angular que a gente chama né E aí

para isso funcionar eu ainda tenho que importar o comon modio porque essa diretiva ela vem dentro do Como mod do ular que é o módulo que contém essas funcionalidades mais comuns assim do ular aí importando como mod ele funcionaria ó ele não vai est exibindo o título porque tá como false né mas se eu trocar aqui ó para true ele vai exibir os dois títulos né ele vai exibir exibir o nosso condicional ali de baixo e vai exibir esse aqui também tá com ngif voltando aqui ó os dois meu títulos Então é assim que funcionava

nos ular mais antigos só que isso aqui não era Muito legal porque era difícil a gente criar essas estruturas aqui de ELS então da gente fazer condições extras né A gente só conseguia fazer uma condicional E caso eu quisesse fazer um else para isso o que que a gente fazia ou eu vinha aqui e botava isso aqui negado né então ah se tiver true mostra isso se tiver falso mostra isso ou também o pessoal criava a diretiva ngc Então já tinha bibliotecas ali módulos que tu conseguia adicionar para usar essa diretiva mas aí Era um

Adon a mais né mais uma coisa que tu tinha que te adicionar no teu projeto então por isso que isso aqui acabou ficando defasado e nas novas versões aí do angler veio essa nova sintaxe aqui que eu pessoalmente prefiro tá eu acho melhor então entendemos como são os condicionais agora vamos passar PR os Loops os Loops É bem parecido aqui com as estruturas dos condicionais só que a invés de fazer um @if a gente vai fazer um @for e eu vou colocar aqui o nome do Item que eu vou est querendo exibir então por exemplo

aqui meu item eu vou botar off então meu list items e eu tenho que obviamente né se eu tô fazendo um loop eu tô loopando através de algo que seja iterável n uma lista então eu venho aqui posso criar uma lista meu list items criei aqui minha list items eu faço loop né pego cada um dos itens da minha list item E aí a gente vai ter que colocar aqui ponto e vírgula e então track it o que que é esse track aqui Certo esse track é uma propriedade do nosso loop que basicamente vai ajudar

o angler a renderizar a nossa lista então quando a a gente tá renderizando uma lista de elementos né Essa lista ela pode ser modificada a gente pode colocar um elemento mais para baixo mais para cima remover elementos enfim né modificar os elementos que estão nessa lista isso esse track aqui vai garantir que o angular vai conseguir fazer o track correto dos itens aqui da nossa Lista então qualquer atualização que ocorra na nossa lista elas vão ser refletidas corretamente na Ui por quê Porque esse track Aqui tá mapeando pro angular como ele deve rastrear cada elemento

certo como é que ele deve identificar então por exemplo aqui eu tô pedindo para ele identificar cada item pelo item mesmo né olhando o próprio item E aí ele consegue ver que esse item não é igual a o outro item então se tiver alguma modificação ele renderiza Corretamente na tela mas se eu tivesse lidando com uma lista de elementos que contém um objeto então aqui ó uma lista que contém vários objetos eu poderia fazer o track através do id desses objetos e aí aqui ó quando eu fizesse o loop eu poderia fazer o track através

do item.id dessa forma né ele vai funcionar da maneira mais correta ele vai conseguir manter ali o track de quando um ele ento é modificado para conseguir fazer a renderização correta para quem Tá vindo do mundo do react sabe que a gente tem que colocar aqui né Para que o react também consiga mapear corretamente os elementos no momento de fazer o loop aqui é a mesma coisa certo pro angular Então deixa eu voltar aqui pra versão das Strings pra gente exibir aqui em tela as nossas Strings através do loop então eu venho aqui ó coloco

aqui ele já não vai mais funcionar o item.id porque os meus itens já não tem mais esse ID né então ele até dá um erro eu vou colocar Aqui um parágrafo e vou exibir a informação do meu item né usando as chaves duplas que a gente já aprendeu e vou exibir essa informação voltando lá ó a gente já consegue ver aqui nossos itens sendo renderizados em tela Então essa é a forma da gente fazer condicionais então aqui a gente tá usando a sintaxe mais nova dos Loops só que eu vou mostrar isso na sintaxe antiga

também para vocês então se eu quisesse fazer um for na sintaxe mais Antiga do angler como é que eu ia fazer ia pegar aqui o meu P certo parágrafo e colocar a diretiva asterisco ng4 da mesma forma que aqui era ngif né eu acabei excluindo mas o ngif era diretiva antiga pra gente fazer é os condicionais agora é ng4 e o que que eu tinha que fazer eu tinha que fazer aqui um let né como se tivesse declarando uma variável let item off list items certo fazia dessa forma aqui e aí eu VM aqui conseguia

renderizar esse meu item aí Aparecia aqui os meus parágrafos em tela ó estão aparecendo aqui embaixo certo então Essa aqui era a sintaxe antiga do angular pra gente fazer a construção dos Loops Mas eu também prefiro a sintaxe nova aqui do arfor Acho que fica mais claro o que que tá acontecendo aqui certo então voltando aqui pro notion terminamos a parte de Loops e condicionais e vamos pra última parte da nossa aula de hoje que são os Services que é a forma da gente compartilhar a Lógica entre os nossos componentes angular então o Services aqui

no angler é um conceito da gente compartilhar lógica certo então o que que isso significa bom quando a gente vai aqui no na classe que representa o nosso componente a gente pode escrever diversos métodos aqui dentro que realizam alguma operação que fazem uma chamada pro backend que formatam o meu formulário que adicionam uma máscara no meu input qualquer coisa né A gente pode Colocar qualquer lógica aqui dentro do nosso componente e utilizar isso no nosso template né fazer isso manipular as informações que tá aparecendo pro usuário enfim certo só que se a gente quisesse pegar

esse mesmo método que tem aqui no meu home component e usar em outro componente Eu não conseguiria fazer esse acesso direto ao método do meu home component né Então Eu precisaria por exemplo duplicar esse método eu teria o método Declarado então precisaria por exemplo duplicar esse método eu teria o método declarado aqui dentro né do nosso home component e dentro do meu outro componente também virei aqui e duplicaria o método certo teria código duplicado Se eu quisesse compartilhar essa lógica entre os componentes a gente então se eu quisesse compartilhar essa lógica aqui entre os componentes

o que eu posso fazer é criar um service como é que a gente faz isso aqui pelo Terminal ó vou abrir mais uma aba no meu terminal a gente vai usar se do angler novamente né então a gente vai vir aqui vamos escrever NG generate e uma coisa importante que eu não mostrei generate uma coisa interessante que eu não mostrei antes é que a gente pode abreviar Então não preciso colocar generate inteiro eu posso colocar só NG G né só abreviar para g e aqui eu colocaria para ele gerar um service certo mas Inclusive eu

posso abreviar Também não preciso escrever service eu posso colocar só um s da mesma forma que se eu fosse gerar um componente vez de escrever component eu colocaria só um ngc n Gener compon is abreviando então generate service o nome do meu service vai ser subm envia formulrio n vai ser o nome do meu meu Serv e eu quero salvar ele dentro da minha pastinha Services envia formulrio se eu dou um enter Aqui já vai gerar para mim aqui dentro da pasta Services que ele acabou de criar formulário service certo e aqui dentro dessa classe

eu posso colocar aquele nosso método lá submit certo ele aqui colocar ele aqui dentro Mas em vez de submit vai ser tipo envia informação para o backend Né o submit tem que tá lá no meu componente mesmo que vai ser a reação do meu botão mas aqui envia informação pro backend aqui por exemplo eu recebo a informação né que é uma String pegamos aqui uma string faço o envio pro backend Digamos que esse meu consol log aqui tá né enviando enviando para o backend Né que aqui poderia ter aqui eu poderia conter né várias linhas

de lógica formatando essa informação chamando backend formatando a resposta do backend etc mas só colocando um consol log e eu consigo reaproveitar esse método aqui envia informação pro backend tanto no meu home component quanto no meu App component E Aí como é que eu faço isso eu venho aqui no meu componente e eu coloco aqui que ele tem um novo atributo certo aqui que eu vou chamar de envia formulário envia formulário service certo e aí para que o angular injete uma Instância do envia formulário service para mim a gente vai usar o inject aqui eu

vou vir aqui ó chamar de inject certo vem dentro do angular Core e eu quero que ele injete para mim umia formulário service certo ele vai fazer injeção aqui de uma Instância né Desse tipo aqui um objeto que tem o tipo envia formulário service que vai ser uma Instância dessa classe aqui certo e eu consigo usar esse meu envia formulário service aqui nos meus métodos ou ao longo do meu da minha classe certo isso aqui é costume né padrão aqui na comunidade a gente deixar como um atributo privado então a gente coloca o Private na

frente e aí o que eu faço aqui eu crio minha função de submit certo que vai ser acionada pelo clique Do meu botão e essa minha função de submit ela vai chamar o meu envia formulário service ponto envia informação pro backend né enviando informação e aí dessa forma eu compartilhei a lógica se eu quisesse utilizar isso aqui lá no meu App component eu fazia a mesma coisa certo eu não preciso ficar reescrevendo esse código isso aqui tudo tá composto lá no meu service eu consigo reutilizar essa lógica aqui certo e aí por exemplo esse Meu

submit podia ser disparado aqui pelo nosso botão né inclusive tirar aqui o ar event não quero que ele passe nada vai ser só né disparado a gente vem aqui abre a nossa aplicação clica no botão ó enviando para o backend certo Tá funcionando então isso aqui é muito legal e aí só dando uma olhadinha aqui mais a fundo no service eu quero mostrar uma coisa para vocês né eu passei aqui rapidamente pela classe do Service Mas vocês devem ter percebido que ele tem Essa decoração aqui de @injectable em cima né então da mesma forma que

os nossos componentes tinham @ component em cima deles os Services aqui eles são decorados com esse @ injectable certo e aí ele tem essa configuração aqui que é o provide in que basicamente vai dizer Em quais locais do meu projeto esse service vai poder ser acessado certo vai poder ser consumido no caso aqui ele vem por padrão com provide in Rot dessa forma com provide in root ele consegue Ser acessado ao longo de toda a nossa aplicação certo e pouquíssimas vezes tu vai precisar mudar isso aqui normalmente a gente já utiliza com o provide in

root aqui mesmo e dessa forma o meu service é acessível por toda a minha aplicação beleza que foi ali o acesso que a gente fez pelo nosso home component sem problema algum E aí aí a gente pode voltar aqui pro nosso notion e dar um ok nessa parte de Services E aí para fechar com chave de ouro eu vou trazer dois Tópicos extras aqui pra gente que eu acho que acabou faltando nessa primeira parte aqui do curso que é né como enviar informações de um componente para o outro e a gente vai aprender aqui como

utilizar o @input e o @output Então a gente vai aprender a usar esses dois decoradores aqui só para finalizar a nossa aula então deixa eu só ajeitar aqui no notion porque tá me dando um to isso daqui agora sim a gente pode voltar lá pra nossa classe eu vou mostrar para Vocês como é que a gente consegue passar uma informação que tá dentro aqui do nosso web component para dentro do Home component por exemplo né como é que a gente faz o trânsito dessas informações bom a gente vier aqui no nosso home component a gente

pode declarar que o nosso home component ele recebe um atributo que é decorado com tipo input né então eu posso chamar aqui de input eu vou chamar de minha props de fora né isso aqui essa informação Veio de fora e Eu vou dizer que o tipo dela é uma string aí o typescript vai me reclamar porque eu não tenho nenhum inicializador para essa variável O que que a gente faz a gente coloca aqui ponto de exclamação que basicamente eu dizendo pro typescript assim ó ó Isso aqui vai ser inicializado ti calma tá Não vai ser

agora mas vai ser eu tenho certeza que vai ser então a gente coloca aqui o asterisco certo a gente coloca aqui a exclamação certo aí agora lá no nosso App component quando a gente for utilizar o nosso home component por exemplo vind aqui utilizo o meu App home para eu passar essa informação pro meu App home eu posso fazer assim ó eu passo aqui através de um atributo Então minha props de fora é igual né Um Valor aleatório E aí eu venho aqui no meu home component e mostra essa informação Então deixa eu tirar tudo

isso aqui colocado Vou deixar só um H1 exibindo aqui a minha props de Fora a gente volta lá pro Navegador D um Reload já consegue ver aqui ó valor aleatório que tá vindo lá do nosso app component certo ele tá passando essa informação aqui para dentro do nosso home component E aí incl Inclusive a gente pode vir aqui no nosso home component renomear o nome dessa variável então eu posso receber isso através de um nome name certo mas aqui dentro do meu componente eu utilizo como valor de minha pros de fora ou teste né então

aqui no meu template eu tenho que Utilizar como teste Só que lá no app component Quando eu for passar esse valor agora eu vou ter que passar como name né porque eu renomeei eu posso manter o mesmo nome eu recebo de um nome e uso através do mesmo nome dentro do meu componente ou eu posso dizer que eu recebo com um nome mas transformando para essa variável aqui para essa variável teste aí se a gente voltar lá ó continua funcionando se eu tento passar aqui com um outro nome pelo app Component ó se eu boto

um valor ó nome errado né não é o nome da propriedade de verdade ele vai dar erro não vai mostrar nada aqui ó não vai conseguir passar tem que passar com o nome que eu mapeei lá certo então esse é o input isso aqui é muito poderoso pra gente passar informação de um componente pro outro e agora vamos passar para @output Então o que aconteceu aqui foi que o nosso home component recebeu uma informa do app component então o app component ele tá Numa posição aqui de pai do meu home component né porque ele que

tá acionando o home então ele tá como pai né ele tá Por volta chamando home a gente chama aqui de pai e filho né então o home acaba sendo filho se eu quisesse que a informação saísse do filho e fosse pro pai aí eu tenho que usar o @output quando eu uso @ input eu tô dizendo que o meu filho recebe uma informação do pai né ele tá sendo imputado uma informação imputou recebeu isso do pai agora para Ele mandar uma informação pro pai aí eu utilizo @output Então agora eu vou fazer com que uma

informação que tá dentro do meu home vá pro meu App component certo vou fazer o caminho inverso Esse vai ser o caminho dos dados vai sair do Home e ir pro app ao invés do que a gente tinha feito antes então como é que a gente vai fazer isso a gente vai utilizar os event emits então aqui vou colocar um @output e eu vou chamar de emitindo valor name certo esse vai ser o nome aí eu vou Fazer aqui um new event emitter e aqui vou fazer a criação do event emitter agora aqui no nosso

submit né que é quando o nosso botão é clicado o que que eu vou fazer eu vou chamar o nosso dis pon emitindo valor name e basicamente o que eu vou passar aqui por parâmetro é o nosso emitindo valor name ponto emit né vou fazer uma emissão de um valor tô transmitindo uma informação e eu vou passar esse valor que é nosso valor name tô só transmitindo o valor name certo e Aqui Inclusive eu posso mapear que aqui ele é um emiter de string né Para eu já ter o tipo certinho então quando ele emite

alguma informação ele emite uma string respeitando aqui o tipo e aqui eu precisava fazer dis pname para est certinho beleza então tô emitindo o meu name e aqui eu tô dizendo que é um emitor de string agora como é que eu escuto essa informação lá pelo meu App component bom eu venho aqui e no momento de eu declarar o meu home component né De eu colocar ele aqui no meu template eu vou fazer é colocar algo para escutar esse meu emitindo valor name então eu chamo isso aqui como se fosse um evento dessa tag HTML

né Tá vendo aqui que eu tô usando os parênteses por volta que nem a gente fez antes nos event bindings né aqui é a mesma coisa a gente tá fazendo um event binding o evento que tá acontecendo é esse emitindo o valor name E aí quando esse evento acontecer o que que eu quero fazer eu quero chamar minha Função de logar sei lá e aí eu quero que essa minha função Receba um parâmetro né que é o evento eu quero que ela receba o evento que foi emitido aí eu venho aqui no meu App component

e crio a função logar que recebe um evento que é uma string E aí eu vou fazer o conso log né vou logar essa informação console.log do evento Então olha só olha o fluxo dos dados aqui eu criei dentro do meu home component um output porque o meu home component tá jogando uma informação para Fora né ele tá fazendo o output de uma informação ele tá se comunicando com o elemento pai dele tá jogando uma informação para fora esse nosso output é um event emitter que é basicamente um emissor de eventos que emite eventos do

tipo string isso aqui seria né que ele vai emitir Strings quando ele acontecer no nosso submit Ou seja quando o nosso botão é cado e aqui a gente acabou tirando o botão mas deixa eu botar aqui o nosso botão de novo botar o clique Aqui do nosso botão chamar a nossa função então quando o nosso botão é clicado ele Acaba acionando Esse Nosso emissor de eventos né que emite o valor name aí eu tô fazendo aqui ponto emit para emitir um evento e passando o meu dis pname certo passando aqui o nome desse componente poderia

passar qualquer outra informação certo só aqui é uma forma da gente criar um túnel entre o pai e o filho pro filho poder passar informações pro pai então então a gente Criou esse túnel E aí a gente emitiu um valor dentro desse túnel agora lá no elemento Pie quando ele foi declarar o app home aqui ele basicamente colocou aqui um event binding pro meu emitindo o valor name né da mesma forma que a gente pode colocar um evento binding pro Click pro Mouse omas over etc ISO aqui é um evento criei aqui o parênteses em

volta para Quando acontecer o evento nesse componente aqui o que eu vou fazer é chamar minha função aqui de logar e essa Função tá recebendo o evento por parâmetro como contexto né temem a gente tinha visto antes então recebeu aqui o evento E aí a minha função logar pega e loga esse evento Então quando a gente volta aqui pro nosso navegador ele tá com dois botões deixa eu ver por eu deixei dois botões aqui home buton tá com dois botões porque eu tô lá com o houter Outlet vou comentar aqui o houter Outlet beleza e

valor aleatório e o clique certo quando eu clicar aqui era Para ele logar Fernanda Fernanda Fernanda da onde tá vindo esse Fernanda aqui exatamente o que o nosso home component tá emitindo lá para nosso app component E aí o app component a gente tá logando isso e o enviando o valor pro pro backend tá vindo aqui do nosso service que a gente chamou lá na home se eu comentar aqui a chamada do Service ó deixar só ele emitindo o valor ele vai emitir esse valor pro meu App component meu App component vai logar esse valor

ó Então Fernanda Fernanda Fernando certo então agora fechamos com chave de ouro e já aprendemos como fazer essa comunicação entre um componente pai e um componente filho se você gostou desta aula que é uma parte dois com assuntos mais complexos do angler deixa aqui nos comentários e se você quiser continuar seus estudos desse firmw ainda hoje eu recomendo que você Assista esse vídeo aqui onde a gente construiu um projeto de login do zero utilizando o angler e Se comunicando com o backend esse vídeo vai ficando por aqui e até a próxima