Unknown

[Música] C [Música] [Aplausos] h [Música] h [Música] Fala galera boa noite tudo bem com vocês sejam bem-vindos a mais um Live coding aqui no canal Hoje olha eu tô sentindo que hoje o Live coding vai ser bom hein por dois motivos o primeiro motivo é que hoje eu vim com uma skin diferenciada eu vim com uma skin que eu costumava vir vir nas primeiras lives aqui do canal quem aí é das antigas do canal sabe do que eu tô falando vamos ver se tem uma galera aí no chat que acompanhava Né desde o começo vamos

ver se vocês conseguem adivinhar o que que eu Qual é a parte aqui da minha Skin que que é das antigas e a segundo motivo que eu acho que o Live coding hoje vai ser massa é porque já tem uma galera aqui no chat Tipo eu tava acompanhando que vocês chegarem Já estamos com 125 pessoas assistindo e o projeto de hoje vai ser muito massa tá mesmo sendo uma Landing page que pode parecer algo simples eu tentei condensar nessa Landing page os principais pontos de diferença do angular 17 então para quem não sabe na Live

de hoje a gente vai usar o angler 17 que é a versão mais recente do angler e uma versão aí do angler que promete bastante tá eles ã trouxeram várias mudanças bem legais Deixaram um Framework assim mais competitivo com o mercado eu diria e vai ser legal vai ser legal a gente criar um projeto do zero hoje usando o angler 17 a galera já acertou é o cabelo molhado exatamente Então hoje eu vim 100% tá o cabelo molhado me traz forças Então hoje eu tô 100% e a gente vai fazer hoje a Live o a

Landing page até o final tá vamos construir até o final nem que leve Du horas para construir essa Landing page a gente vai ficar aqui fazendo vamos passar por tudo e vamos construir vamos sair daqui com uma Landing Page bonits do zero criada com angler 17 então bem-vindos de novo né sejam muito bem-vindos eu vi que tem vários membros do canal por aí então o Gabriel tá por aí o Fabrício tá por aí também o André o Mateus o William então tem uma galera por aí o Guilherme Henrique tá por aí também ele tá quase

sempre em todas as lives aqui do canal então bem-vindos e bora começar a Live de hoje vai ficar aberta tá então eu costumo eu faço quatro lives por mês todo domingo tem Live coding aqui no canal eu deixo três lives gravada somente pros membros do canal e uma live do mês eu deixo aberta para toda a comunidade porque eu o meu objetivo aqui o canal sempre foi ajudar a nossa comunidade ajudar a comunidade de desenvolvedores do Brasil e eu acho que tem pouquíssimos conteúdos de angular 17 disponíveis em português então é por isso que eu

vou escolher essa Live para deixar aberta tá então a gente não encontra muitos conteúdos conteúdos conteúdos a gente não encontra muitos conteúdos de angular 17 em português Inclusive eu quando estudando 17 usei todos conteúdos só em inglês tá não encontrei nenhum em português assim mais completinho então a Live de hoje vai ficar aberta para toda a comunidade bom bora comear então vou compartilhar a tela aqui eu fiz um Nozinho pra gente se guiar hoje notion e figma então a Live de hoje tá tá em outro nível a gente tá de cabelo molhado tem notion tem

figma estamos preparado pra Live de hoje então deixa eu compartilhar a tela pera aí deixa eu diminuir aqui meu rosto tirar o YouTube daqui deixar só o figma e acho que eu tô muito grande vou acabar tapando o código depois então vou botar aqui bem pequenininho Belê Então já tem aqui Um spoiler né do figma que a gente vai construir hoje é esse figma aqui é uma Landing page super simples tá não tem aqui não tem nenhum desafio de CSS contido nessa Landing page o que a gente vai explorar na Live de hoje mesmo é

para quem tá vendo as primeiras vezes né tá tendo seus primeiros contatos com angler vai entender como o Framework funciona e para quem já manja de angler e quer entender as principais mudanças do angler 17 vai conseguir se atualizar na Live de hoje também então por isso que o design é simples mas é só pra gente conseguir passar aí pelos principais conteúdos né pelas partes mais importantes ali das da da atualização do angler então Belê é esse figma que a gente vai trabalhar hoje vou mandar o link aqui para vocês do figma e já vou

abrir aqui o notion e mandar o link para vocês também então deixa eu pegar aqui o link do figma jogar no chatar aqui e agora vou abrir o notion também aqui para nós aqui no notion eu coloquei uns links ã importantes assim uns links úteis que é o figma né que a gente vai construir um artigo muito massa lá no no próprio blog do angler falando sobre as principais mudanças do angular 17 Então esse artigo aqui foi um dos primeiros que eu li assim que lançaram a versão 17 do angler traz assim de forma bem

condensada as principais mudanças que vieram pro Framework e aqui a própria documentação do angler que é a nova documentação então o angler antigamente tinha essa documentação aqui ó essa documentação aqui com a cara antiga do angler com a versão 17 Eles mudaram até de logo tá mais bonito tá mais moderno e essa aqui é a nova documentação tá essa aqui é a nova documentação do angler então algumas coisas que a gente vai usar tem aqui na documentação antiga porque são conceitos do angular que já existem de outras versões Mas algumas outras coisas que a gente

vai usar na Live de hoje existem somente no angular 17 é por isso que a gente vai usar essa doc aqui para se guiar é uma doc em versão Beta ainda tá porque o angler 17 é bem novo tá bem novo mesmo acho que aqui eu não sei se é essa data exatamente mas foi mais ou menos perto dessa data aqui em novembro 8 de Novembro acredito que seja Exatamente Essa aqui o dia que lançou o angler S então uma versão bem nova aí né Do angler e aqui eu condense a as principais coisas que

a gente precisa fazer algumas explicações aqui para vocês que vocês podem usar para ler depois também para estudar em casa né H se vocês quiserem estudar depois então vou pegar aqui o link do notion e mandar para vocês mandar aqui o link do notion belê o Davison perguntou o seguinte o mercado jungler é bom Fê olha na minha visão é um mercado bom por várias empresas ã clássicas empresas mais antigas usam o angler tá E esse tipo de empresa costuma pagar bem como por exemplo bancos Eu trabalho no banco eu uso angler e bom o

trabalhar em empresas assim mais antigas são empresas mais bem estabelecidas no mercado então não tem tanto risco da empresa por exemplo quebrar ou perder bastante dinheiro e ter que demitir bastante funcionários então são empresas um pouco mais estáveis claro pode sempre acontecer alguma coisa mas são empresas um pouco mais estáveis esse tipo de empresa costuma usar o angler e também eu vejo bastante galera usando o angler para quem usa Java no backend então o angler casa muito com com o Spring né do Java casa muito são frameworks parecidos seguem conceitos parecidos design patterns parecidos Então

os times costumam usar quando usam Java no backend normalmente é angular no front volta e meia tem um time que tenta mudar tenta usar react ou vi no front mas a maioria Quando é Java no backend é angular no Fronte E aí tem várias oportunidades na gringa também então aqui no Brasil eu vejo empresas mais antigas assim usarem não só empresas antigas mas né são as que fazem mais barulho por assim dizer da comunidade angler e na gringa muitas empresas usam angler com Java tá então vocês já devem ter visto no Linkedin várias vagas de

Java ã e normalmente essas empresas que usam Java usam angler também no Fronte angler e react às vezes os dois frameworks mas provavelmente tem algum projeto angler ali então e o angular tá se atualizando não é um Framework antigo não é um Framework legado tá inclusive Vamos trabalhar com a versão mais recente hoje que lançou em novembro de 2023 muito recente implementa várias práticas de frontend usada por vários outros frameworks é um Framework muito bom de se trabalhar muito estável e um Framework bem seguro também então eu vejo o mercado de jungler com bons olhos

gosto de trabalhar com angler e já recebi várias oportunidades também para trabalhar em outras empresas aqui do do Brasil com angler inclusive olhando no Linkedin às vezes volta em meio eu tô lá olhando vagas só para ficar aqui por dentro para compartilhar com vocês né porque eu produzo conteúdo eu tenho que estar por dentro várias vagas da Gringa pedindo angular e Java por exemplo então é um mercado bem bem aquecido e com bastante oportunidades na minha visão Claro bom bora começar não V enrolar muito Então a primeira coisa que a gente vai fazer para quem

não tem unler ainda aí instalado na sua máquina a gente precisa ter pelo menos o node tá então pelo menos o node tem que estar instalado na máquina aí a gente vai usar o npm para instalar o angler a gente pode instalar o angler de forma global que foi o comandinho aqui que eu coloquei para mostrar para vocês ou a gente pode instalar o angler só dentro de uma pasta por exemplo eu prefiro instalar instalar ele Global porque depois eu fico usando a calai do angler para criar novos projetos para manipular um projeto ali dentro

dele criar componentes enfim é legal instalar se aai de forma global para conseguir usar para vários outros projetos Então vamos instalar aqui essa é a l do angler eu já tenho instalada mas vou rodar o comando de novo não tem problema e a gente vai selecionar aqui especificamente a versão 17 então npm install @angular que é a biblioteca @ 17 na versão 17 e o Men G aqui essa Flag é para indicar que é para instalar de forma Global então para todo o nosso PC e em qualquer pasta a gente vai conseguir usar a cai

do angler quando a gente instala dessa maneira aqui então vamos rodar eu já tenho aqui então acho que vai ser rápido hum vi a galera perguntando no chat se vai ficar salvo como eu já expliquei no início da Live essa Live de hoje vai ficar aberta para toda a comunidade porque não tem conteúdos tem pouquíssimos né conteúdos de angler 17 em português então a Live de hoje vai ficar aberta para toda comunidade o Dan tá por aí também que é membro aqui do canal Eu sempre gosto quando tem os membros aqui do canal participando da

Live a galera apoia demais aqui o canal bom ã instalado aqui a c do angler Vamos criar um novo projeto angler eu vou entrar aqui na minha pastinha onde eu crio meus projetos tá que é minha pasta projects aqui e aí a gente vai usar um comando que é da seai do angler que é o new ó o Antônio tá por aí também membro aqui do canal o Gabriel tá por aí também então boa noite galera e bem-vindos e bora para mais uma live a gente pode usar então como eu tava falando Sea do angler

a gente vai rodar o comando NG new Esse comando é para criar um novo projeto angular New né de novo aí a gente tem Duas escolhas aqui a gente pode rodar só ngil e aí respondendo as perguntas e aí no momento de responder as perguntas a gente vai fazer o enable do ssr ou a gente vai usar Flag menos menos ssr que aí a gente já cria um projeto angler com ssr quem aí no chat quem aí no chat sabe o que que é ssr sever signed rendering quem aí no chat manja do que que

é isso aqui que eu tô falando server Side rendering Manda aí para mim só para eu entender Em que em que nível estamos aqui em que pé estamos só para eu saber se se explico mais a fundo ou se passo só por cima renderização do lado do servidor é exatamente renderização pro lado do servidor o Next tem ssr exatamente boa eu não sei nem o que é and Tá beleza então vou começar começa aqui angler é um Framework para construir aplicações front end front end é a parte visual de uma aplicação é essa parte aqui

que a gente tá vendo isso aqui é o frontend ó Isso aqui tudo que a gente acessa no nosso browser no navegador é um frontend é a parte da interface de uma aplicação por trás quase sempre tem um servidor o servidor manipula as informações guarda essas informações no no banco de dados faz lógica Faz uma série de operações ali com os nossos dados que a gente fornece algumas lógicas para enfim fazer a aplicação funcionar mas essa parte visual essa parte que o usuário interage é o front end o angler é um Framework pra gente construir

aplicações from Change o que que é um Framework é uma série de ferramentas funções já pré criadas para nós que a gente só utiliza instala na nossa máquina e utiliza para facilitar nossa vida e não precisar criar a roda do zero né então a gente utiliza frameworks ou bibliotecas para criar projetos porque Isso facilita bastante a nossa vida como desenvolvedores que ali já tem bastante coisa pronta e a gente só reutiliza o Framework é um desses ao lado do react o Framework o angler é um desses ao lado do react que é uma biblioteca ao

lado do nextjs que é um Framework o View que é uma biblioteca também se eu não me engano eu não sei se o View é biblioteca Framework tem quase certeza que biblioteca e o angler é um desses carinhas o server Side rendering é é uma prática no frontend que a gente faz o seguinte em vez da gente renderizar a aplicação no navegador do usuário o que que é renderizar é pintar a aplicação na tela tá é montar os componentes montar tudo aqui pro usuário em vez da gente fazer isso no navegador do usuário a gente

faz isso do lado do servidor E aí retorna pro usuário somente o HTML o CSS o javscript estatico já tá tudo montado os componentes já estão montados ali no HTML na Don então mesmo que aqui no código a gente escreva código JavaScript injetando componente manipulando quando a gente faz o build da aplicação ele gera a versão estática do nosso site react ã hoje eu não tenho certeza não react não tem suporte nativo para ssr temho quase certeza então por exemplo se tu cria uma aplicação react tu vai est criando uma Spa single page application uma

single page application é uma página é um frontend que só tem uma página O que que significa só uma página Ele só tem um HTML um HTML de entrada o index HTML nesse HTML o JavaScript é responsável por injetar as coisas injetar os elementos os componentes e ir manipulando então o usuário pensa que tá navegando para uma página diferente como por exemplo aqui no meu site no Fernanda ker eu penso que eu tô na página de links eu volto aqui pra home eu penso que tô numa página diferente é um HTML diferente certo não é

o mesmo HTML porque isso aqui é react quem tá manipulando essas páginas aqui de forma fake pro usuário é o JavaScript isso aqui é um spa tá então o JavaScript foi responsável por renderizar essa página no lado do cliente então no lado do navegador se eu desabilitar o JavaScript aqui no meu navegador ó eu venho aqui em configurações e vou desabilitar o JavaScript e der um Reload na minha página a minha página não aparece mais nada tá tudo branco por quê Porque quem é responsável por injetar o HTML nessa minha página é o JavaScript Eu

tenho um código JavaScript que vai manipulando tudo e injetando coisas no meu HTML mas o meu HTML de fato meu arquivo index HTML tá vazio só tem um B com um ID ali que eu busco por aquele id e vou injetando as coisas quando eu tô falando de ssr eu continuo criando as coisas com JavaScript só que antes de mandar pro cliente antes de mandar pro navegador da pessoa eu renderizo isso no lado do servidor que é o meu lado aqui né renderizo faço build E aí monta um HTML estático e a pessoa recebe só

um HTML estático e aí mesmo que ela desabilitar o JavaScript por exemplo continua ali a página porque o navegador entende JavaScript entende HTML né o navegador renderiza o HTML renderiza Dom Então é isso isso é ssf o João puxou uma boa aqui um bom bom ponto de discussão eu não vi se a galera tava falando sobre isso mas que eu vi aqui a mensagem do João que ele falou o seguinte ó react é péssimo para indexação de motores de busca por falta de so exatamente o react é ruim por causa disso Como como é o

JavaScript que renderiza tudo na página imagina o seguinte quando eu busco aqui no Google como por exemplo eu vou buscar cas aqui no Google sei lá foi a primeira coisa que eu pensei Casemiro quando eu busco o Casemiro no Google o motorzinho de busca aqui do Google vai pesquisar por todas as páginas que ele tem ali né no banco de dados dele vai pesquisar as que tiverem Mat com Casemiro Mas se a se eu criei uma página pro Casemiro feita com react a a indexação dessa minha página quando alguém buscar por Casemiro vai ser muito

baixa por quê Porque o motorzinho aqui de busca imagina né Toda vez que a gente lança um site por ar ou de volta tipo de tempos em tempos os robozinhos eu vou usar essa palavra Eu sei que não é exatamente isso mas só para simplificar porque não é o ponto da Live de hoje os robozinhos do Google vão passando pelas páginas para indexar aquelas páginas para saber do que que elas se tratam porque quando alguém buscar ele tem que saber o que retornar então ele vai lá o robozinho do Google passa por todas as páginas

e vai indexando o que que é indexar é catalogar né catalogar ah essa página aqui fala disso essa página aqui fala disso o robozinho do Google faz isso em uns 5 segundos por exemplo de 2 a 3 segundos é muito pouco eu não sei dizer o tempo exatamente mas eu sei que é tipo pouquíssimo tempo porque ele tem que passar por todas as páginas da Internet tu acha que o robozinho do Google vai esperar o meu JavaScript criar aqui toda a minha tela e montar todos os componentes E aí procurar aqui as palavras chave não

vai tá muito provavelmente não vai se tiver uma página com html esttico html puro que já diz ali Casemiro é o melhor jogador jogador Casemiro Casemiro Casemiro Casemiro Casemiro aquela página com HTML estático HTML puro vai ser muito melhor indexada do que a minha página com react se eu claro se eu não tiver aplicado práticas de ss de so no react tem formas de melhorar mas se eu usar só react basicão e não tentar melhorar vai ser ruim a indexação e eu não vou aparecer nas buscas não vou aparecer aqui em cima pode ser até

que eu apareça porque o robozinho lá depois vai entender que a minha página se trata do Casemiro mas eu não vou estar aqui por cima porque a outra página tem muito mais palavras chave de Casemiro e ele pegou muito mais rápido e bota aqui no topo então então é por isso que react puro não é tão bom para so tem técnicas para melhorar mas o melhor o ideal seria usar por exemplo HTML esttico é bem melhor indexado bem melhor pra prática de So isso também é melhor para depois advertisement né para fazer propagandas para indexar

aquele nosso site com com propagandas ou com buscas como por exemplo a gente paga pro nosso site aparecer lá em cima na busca tal mas eu preciso que o so do meu site esteja bom também para bater com a busca dos usuários enfim outro assunto Posso trazer para uma live para um vídeo aqui do canal se vocês quiserem Se quiserem saber mais coloquem aqui no chat ou coloquem nos comentários depois eu eu eu leio os comentários de vocês eu Trago aqui pro Canal o que vocês pedem eu faço conteúdo pra nossa comunidade Então se vocês

quiserem saber mais sobre isso eu vou vou falar sobre isso então eu só preciso saber se vocês querem ou não eu vou trazendo sempre conteúdos que vão agregar aqui paraa nossa comunidade e vão agregar para vocês principalmente que acompanham aqui o canal mas tem D um resumão assim por cima ã acho que deu para entender então o que que é ssr onde se encontra o angler por que é legal a gente usar ess Sr principalmente numa Landing page que é uma página Teoricamente e Teoricamente não Landing page é uma página estática então é uma página

que traz informações de uma empresa por exemplo de um serviço de uma pessoa pode ser o portfólio de uma pessoa uma Landing page também então é muito legal que o que uma Landing page seja um HTML estático para ficar mais alto no ranking de buscas porque por exemplo se for a site o site do meu negócio eu quero que o site do meu negócio apareça lá em cima nas buscas quando o meu usuário procurar por exemplo consultoria de tecnologia eu quero que ele apareça então é legal a gente usar um HTML estático Mas se eu

não quero escrever HTML CSS puro sem ter ali ajudinha de um Framework eu posso usar frameworks que implementam implementam a prática de ssr que ser s runing e o angler é um desses frameworks agora Outro exemplo é o nextjs que é uma uma versão mais poderosa do react né e o angler aí trouxe essa atualização com o suporte a ssr e é o que a gente vai fazer na Live de hoje nossa introdução introdução longa né eu falei demais eu tava me sentindo que o o emen já de de tanta coisa que eu falei galera

não não deem bola para minhas piadas ruins tá Eu Sou formada nisso eu sou formada em fazer piadas ruins é essa é minha formação Vocês perguntam o que que eu faço na faculdade é faculdade de piadas ruins faz um parei Eu juro que eu parei eu juro eu parei tá ã o Edu mandou um super chat aqui para nós valeu demais Edu Eduardo paixão Então Valeu ele falou assim ó o under 17 tá uma delicinha vou usar hoje mesmo eu concordo gostei muito do das atualizações do ang 17 tá uma delícia mesmo uma delicinha de

usar ã eu achei mais leve assim de usar menos verboso enfim a gente vai ver as mudanças agora então depois o o meu rap god aqui né Vamos criar o nosso projeto angler faculdade A Praça é Nossa essa mesma que eu cursei essa foi essa aí que eu fiz boa o Júnior eu tô assistindo na velocidade 0.5 tá de boa Tá vamos começar Então o que eu vou fazer eu vou criar aqui o projeto angler usando o NG New sem a anotação ssr só para vocês verem as perguntas que ele vai fazer tá então NG

New e eu tenho que passar o nome do projeto que eu quero criar Inclusive eu tenho que colocar aqui para vocês ó tem que passar o Project name então NG New Landing page vou dar um nome el vai perguntar qual formato de Style sheet você quer usar eu vou usar o scss que é o que eu uso costumo usar no trabalho é o que eu sou mais acostumada a usar o sas né é a sintaxe que eu tô mais acostumada e é uma sintaxe usada bastante também da pela comunidade angular Então a gente vai escolher

esse aqui aí ele vai nos perguntar o seguinte você quer usar você quer ligar né o ssr eu quero Então vou colocar como Yes E é isto apenas isto vamos esperar que ele criar para nós boa noite joh joh entrou aí membro aqui do canal seja bem-vindo o v tá por aí também Vi agora bem-vindo galera Pois é o colocou o seguinte el não pergunta botas interessante já faz direto então Johnny eu eu até tinha colocado aqui ó que ele perguntaria do angular routing porque se eu não me engano o primeiro projeto que eu que

eu criei com o angular 17 eu tinha a impressão que ele tinha perguntado do angular routing Mas agora ele não perguntou mesmo ã bem observado mas eu tinha a impressão de que ele tinha me perguntado a última vez mas pelo jeito não né Pelo jeito eu me enganei porque senão ele ia ter perguntado agora também Mas estranho vamos ver talvez eu posso ter esquecido alguma Flag vamos esperar ele criar aqui porque a gente quer usar angular routing né a gente quer usar o roteamento do angular o angular diferente do react oferece vários módulos nativos do

angular pra gente integrar na nossa aplicação para implementar várias soluções diferentes como por exemplo no react o pessoal que criou o react não tem uma tipo o react em si né não tem um módulo para roteamento a gente pode usar diferentes bibliotecas que a gente adiciona ali com o react usa em conjunto E aí faz o roteamento de páginas com react no angular não o angular já oferece módulos nativos né Por assim dizer nativos do angler eu quero é meu objetivo é falar nativo do angler não nativo no na questão de mobile só nativo do

angler que oferece várias soluções assim já prontas como por exemplo de roteamento que é o angular routing Então se tu quer fazer roteamento de telas né tá num spa quer fazer várias telas num spa usa o angular routing Beleza o o kavis SC perguntou o seguinte ó Existe algum angular Native tipo de uma fmaa de usar o angular para mobile tem como usar o angular para mobile tá Inclusive eu uso no trabalho não é angular Native o nome eu sei que tu perguntou só como exemplo mas não é esse nome Inclusive acho que é o

angular puro só que a forma de buildar tu é tipo tu cria tipo um webview assim parece meio zoado mas a performance é boa tá é uma performance boa assim é tipo como se tu reendereçado cada vez mais né as soluções híbridas para mobile Então até que é bom Claro não vai ser melhor que o nativo Mas é bom só não me lembro o nome não me lembro exatamente como é que faz para usar mas eu sei que dá ã Tá então vamos entrar aqui na nossa nossa pasta e vamos abrir o vs code aí

eu vou dar uma uma um overview aqui das das mudanças para vocês do angular 17 Olha só o seguinte a pasta source continua a mesma coisa que a gente tinha do angler e a gente tem aqui a nossa pasta app as primeiras mudanças é esse Main server que como vocês podem ver aqui antes a gente tinha no angler só o por exemplo o m in dava o Bootstrap da aplicação né inicia a aplicação Bootstrap tipo pontapé inicial agora a gente tem o Bootstrap do server que server Esse é o server que vai renderizar a minha

aplicação e retornar o HTML estático pro cliente pro navegador então agora como a gente tá usando ssr no angular a gente tem isso Outro ponto de diferença o app config que configura a nossa aplicação angler E aí tem o appconfig pserver que configura o meu server o meu servidor que vai hospedar essa aplicação angler E servir o HTML estático e de mudanças são isso por enquanto daqui da organização das pastas que eu me lembro né assim por cima é as principais mudanças e ele veio com APP routs ó Então realmente ele não precisou perguntar ele

já vem com com routing integrado já pelo jeito eu tinha a impressão de que a primeira vez que eu criei ele me perguntou talvez Talvez ele possa ter guardado um Cash talvez eu coloquei tipo não perguntar mais não acho que não enfim parece que tá vindo agora por default já com angular routing então o que que a gente vai fazer a gente vai vir aqui no nosso app component e vamos excluir tudo isso daqui todo esse estilo padrão que vem né essa telinha de boas-vindas vamos excluir e vamos deixar só o router outlet o router

outlet é a saída das nossas rotas aqui no app routes dentro desse arrei a gente vai controlar as rotas da nossa aplicação como exemplo a home a página de contato a página de ajuda sei lá as páginas que a nossa aplicação tiver no nosso caso aqui só vai ter a home Mas é aqui nesse Array que a gente configura isso feito isso bora começar Vamos criar nosso primeiro nosso primeiro componente inclusive aqui no notion eu deixei aqui até o como é que faz E aí eu vou explicar umas coisinhas para vocês então vou abrir aqui

meu terminal e vou rodar o comando NG generate component isso aqui é da própria C do angler E aí eu vou dizer onde é que eu quero salvar esse component que eu tô gerando ele vai gerar já todo o código boiler Plate para mim então NG generate component E aí eu vou passar vou colocar dentro da pasta components e eu vou chamar de Main ou de home home Ah pode ser home components home ele gerou aqui para mim então se a gente abrir a pasta App a gente já vem aqui já vi que el criou

a pasta components e cri componente home aí outra Mud muito legal do angular são os Stand Alone components isso aqui resolve uma dor de cabeça Quem éved angler por porque no angler antes abrir aqui mostar você quando a gentea configurando nosos componentes a gente tinha que colocar o noso componente Deixa eu procurar Smart feit challenge Fernanda a gente tinha que configurar paraos nossos componentes só para eu pegar aqui o repositório certo a gente I configurar para nossos componentes os módulos que que são os módulos é um arquivo que declara tudo que aquele módulo importa e

exporta então o que que ele importa ele importa Services importa outros módulos importa outros componentes e exporta o que ele quer mostrar pro mundo de fora como se fosse os packets do Java tá não é bem isso mas fazendo uma analogia para quem é do Java entender como se fosse os packets do Java do Java toda gringa ã como se fosse os packets do Java aí Isso aqui é uma baita dor de cabeça porque a gente cara a gente tem que ficar declarando aqui no NG Model tudo que o nosso componente consegue ver então por

exemplo eu vou criar o meu App component eu quero junto com o app component usar o header component o forms component o Card list e eu tenho que colocar tudo aqui dentro de DEC senão esse componente aqui não ia conseguir usar esse por exemplo se eles não tivessem no mesmo módulo ou se eu não tivesse importando o módulo onde esse outro componente que tá declarado aí se eu quero usar um um service eu ia ter que colocar aqui nos providers se eu quero usar um Import importar outro módulo que seria um módulo igual esse aqui

que declara outras coisas eu tenho que colocar aqui nos imports enfim e aí eu ia ter que eu preciso ficar criando isso ou pro meu App completo tipo eu má prática tá era a pessoa usar só o app Mod appm para declarar tudo da sua aplicação E aí ficava uma bagunça ou tinha gente que cria um appm um um modo para cada componente diferente aqui no caso eu tinha declarado tudo no mesmo por pelo vídeo porque eram poucos componentes aqui mas é comum a gente dividir em outros módulos e eu acabo tendo vários módulos aí

eu vou criar um novo componente eu esqueço de importar o módulo onde aquele outro componente que eu vou usar tá declarado aí enfim era uma dorzinha de cabeça esses módulos era um arquivo a mais complicava bastante para quem tava começando no angler também então eu acho que essa nova feature aqui de Stand Alone ajudou muito por qu agora com standalone eu digo o seguinte esse componente aqui é só ele mesmo tá eu não quero declarar ele no módulo ele é ele e deu ele é ele e deu standalone só ele as coisas que ele precisar

usar eu vou colocar aqui nos imports dele e deu e deu tá não vou precisar ficar declarando os outros aqueles não tem mais isso coloco aqui em cima já na declaração do componente mesmo resolveu minha vida facilitou muito tá eu eu sofria muito com erro de falta de Import no angler nos módulos porque assim aquela aplicação ali que eu mostrei do outro desafio até uma aplicação menor assim o desafio era bem complexo e tal tipo a gente teve que criar vários componentes mas nada comparado com aplicações que a gente mexe no nosso trabalho né no

Dia a Dia ali que tem milhões de pastas e componentes e tal e aí tu acaba se perdendo com aqueles módulos porque um às vezes um componente não pode estar declarado em dois módulos diferentes e aí eu importar um tipo colocar nos imports dois módulos que declaram aquele mesmo componente dá erro dá erro de Build do angler aí eu tinha que descobrir como é que eu ia fazer porque agora as pessoas declararam esse componente lá naquele módulo e l nesse enfim era uma dorzinha de cabeça para quem é do angler entende o que eu tô

dizendo né para quem já mexeu com angler sabe que era uma dorzinha de cabeça depois que a gente pega a prática é de boa mas no começo dá uma dorzinha de cabeça a das dependências exatamente e e era chatinho tá E esse Tend Alone aqui resolveu nosso nossa vida então a gente vai usar esse essa anotação aqui para quem não conhece a anotação de componentes no angler eu vou explicar cada um aqui rapidamente o selector ã indica como eu vou usar esse componente como eu vou referenciar esse componente em outro componente como por exemplo aqui

no app component html L que é outro componente se eu quero usar esse componente aqui da home que eu criei como é que eu vou fazer eu vou selecionar ele assim com APP home Esse é o seletor dele mas para que isso funcione eu preciso que o app home esteja nos imports aqui do componente né aqui do componente do app por exemplo aqui eu colocar o home component ele ia parar de me encodar ó ia deixar usar se não tiver aqui ele não enxerga esse componente né se não tiver nos Imports que ele não enxerga

não sabe que o outro existe por isso que dá erro aqui no HTML tá isso é o selector o Stand Alone é o que eu já expliquei é o componente ele sozinho sem pertencer a um módulo os imports são as coisas que ele vai precisar usar a gente vai colocando aqui as coisas eu digo componentes do angler tá componentes e Services e diretivas do angler a gente vai colocando aqui em imports e providers a gente vai colocando nesses arris aqui template URL é onde é indica onde Onde fica o arquivo HTML desse componente então onde

fica o template HTML desse componente é o pef desse HTML e o Style URL é o RL Onde fica o estilo desse componente que aí depois o angler depois quando for buildar tudo vai aplicar esse estilo a esse HTML aqui enfim vai fazer todas as coisas que que precisa né Belê Então bora começar abrindo aqui o nosso nosso figma eu vou mandar o link aqui de novo para quem não não pegou no início da Live a gente tem esse reder aqui onde a gente deixa um o logo da nossa consultoria isso aqui a maioria dessas

imagens eu gerei com com inteligência artificial acho que vocês já devem ter percebido inclusive o logo quem gerou o logo foi o o Dali do chat PT e ele teve uma um série problema em repetir letras ó aqui o Kiper ele colocou três PS E Consultoria ele colocou três T também não sei por eu tentei fazer ele mudar ele não não tava muito com vontade Então deixei assim mesmo ele fez uma um estilo aqui diferente né Para nós equiper consultoria Tá então vamos exportar aqui esse logo vou pegar o png dele para usar lá no

nosso projeto o Ricardo mandou um super chat aqui para nós então valeu Ricardo deixa eu ver o que que ele mandou aqui ó Oi Fê vou começar a cursar engenharia de software esse ano Mas nunca tive contato com a área alguma recomendação para fortificar aprendizado nesse começo Recomendo muito estudar lógica de programação e algoritmos é muito importante é uma base da programação tu vai usar para qualquer área da programação que tu for atuar e vai te ajudar muito nas primeiras matérias de algoritmos da faculdade então já começa a estudar agora dá uma procurad Dinha no

YouTube pelo Gustavo Guanabara ele tem vários conteúdos de lógica de programação para quem tá começando e quando começar entender o que é lógica de programação O que são algoritmos escolhe uma linguagem com uma sintaxe mais simples no no começo como por exemplo o próprio JavaScript e o Python que são linguagens menos robustas comparadas Ao Java depois tu vai entender o que eu quero dizer quando for conhecendo mais a fundo escolhe uma dessas linguagens que a galera menciona normalmente que é bom para iniciantes e começa a desenvolver alguns algoritmo zinhos calculadora calculadora de data formatador de

nome esse tipo de coisa e depois procura por sites Como hacker Hank leit code começa a tentar cabça tentar quebrar a cabeça para resolver alguns algoritmos começa pelos fáceis pelos simples E aí tu vai pegando o que que é lógica de programação o que que é algoritmo estrutura de dados isso vai te ajudar bastante no começo da faculdade tá tá Então pegamos aqui a o nosso logo tá cheio das mãozinhas ali a gente vai colocar esse logo aqui nessa pasta assets da nossa aplicação Então vou jogar aqui o logo pra gente aqui na pasta assets

e nós vamos usar esse logo aqui eu vou gerar um novo componente que eu vou chamar de header E aí dentro do header nós vamos deixar o nosso logo então o meu header aqui vai ser um header eu vou colocar uma classe app header dentro desse app header eu vou colocar uma imagem e aí a gente vai usar outra coisa diferente aqui a gente vai usar vou abrir aqui para vocês a diretiva NG optimiz image esse essa diretiva aqui foi introduzida do angular 14 aqui como eu coloquei para vocês e ela basicamente nos ajuda ela

facilita o carregamento de imagens no angler e implementa umas estratégias para melhorar esse carregamento para quem não sabe ã ter bastante imagens num site deixa o site mais lento por quê Porque o nosso navegador busca primeiro o HTML aí esse HTML tem referências a arquivos de de CSS ele pede pro servidor o CSS esse HT ml tem referências à imagem então o navegador vai lá e bate de novo no servidor pedindo essas imagens carregando elas e a quanto mais imagens mais vezes o navegador vai ter que bater no servidor para pedir cada imagem isso às

vezes deixa o site mais lento se a gente não tratar isso da forma correta porque o navegador vai fazer o seguinte ele vai esperar tudo ser carregado até mostrar o site pro usuário mas enquanto isso o usuário tá vendo uma tela branca tá vendo lá o load inzinho do navegador e a tela branca e tá aqui impaciente que dentro do nosso site carregue então o NG é optim Image é uma diretiva do Anger que ajuda a gente tratar as manipular imagens aqui no Anger de uma maneira mais eficiente mais performática ativando ali algumas práticas de

performance de uso de imagem então é legal a gente usar essa diretiva aqui e a gente vai ter que colocar essa diretiva nos imports do nosso componente nos imports aqui do nosso header porque a gente vai usar essa diretiva como é que a gente utiliza ela é só usar aqui NG source na nossa tag image E aí colocar aqui o pef da nossa imag imagem F Qual é o pf aqui da minha imagem como é que eu faço eu boto dois eu boto ponto dois pontos barra dois pontos Barra assets do P bar assets bar

logo não aqui o que que a gente vai fazer a gente vai colocar direto logo.png por que logo.png na real é assets assets logo png por que isso porque aqui ah a gente tá usando o server Side rendering o server Side rendering vai carregar os nossos htmls vai buildar eles né o nosso servidor vai buildar os htmls estáticos E aí vai servir esses htmls estáticos e ele vai servir também de forma estático essa pasta aqui SS então quando esse meu HTML aparecer lá na página pro meu usuário quando o meu usuário acessar aqui o HTML

da página ele vai enxergar os assets como vizinho como uma pasta vizinha que tá sendo servida também que é essa pasta assets então para acessar assets Eu só pego aqui ponto barra onde eu estou que vai ser onde esse HTML vai estar ponto barra assets para acessar a pasta vizinha barra e aí o nome da imagem logo.png dessa forma a gente já acessa a imagem aí essa diretiva aqui NG optimize image ela tem alguns pontos aqui de atenção ela recebe algumas propriedades que a gente vai usar para configurar a forma como essa imagem vai ser

carregada uma primeira propriedade essa propriedade priority né prioridade ela define a prioridade do do carregamento dessa imagem se essa imagem for muito importante pra minha tela eu quero definir ela como prioritária tá para evitar com que o meu usuário veja a minha tela veja o meu Fronte sem a imagem ter carregado ainda se for algo muito crucial pra minha tela se for uma imagem prioritária eu coloco ela como prioridade dessa forma eu obrigo o meu navegador esperar aquela imagem carregar antes de mostrar o meu HTML pro usuário É isso que eu tô fazendo com esse

Prior ele vai botar essa imagem na na ordem de carregamento mais alta né vai botar essa imagem para carregar antes do que os outros recursos E aí para quando o navegador exip o o HTML já tem essa essa imagem aqui carregada a gente pode eu vou deixar como false porque nenhuma dessas imagens aqui no meu ver são prioridade talvez só essa imagem grande aqui fosse uma imagem prioritária porque ela ocupa grande parte da tela e carregar a tela pro usuário sem isso ficaria estranho mas vamos deixar como falso por enquanto mas se quiséssemos poderemos colocar

essa imagem aqui grandora como prioritária também agora essas duas imagens Aqui de baixo não são prioritárias porque a primeira coisa que o meu usuário vai ver vai ser essa sessão aqui de cima mesmo que tudo isso aqui faça parte da mesma página não faz sentido eu colocar tipo essas duas imagens aqui com prioritárias porque o meu usuário ainda precisaria dar scroll para visualizar elas então isso aqui dá para deixar totalmente como não prioritário já essa aqui que é bem no começo bem na frente faz parte aqui do layout inicial da minha página talvez seria legal

deixara como prioritária Mas beleza vou deixar até vou colocar como priority eu não me engano não me lembro o que que tem que passar aqui NG eu não sei se é só deixar como priority ou tem que colocar priority alguma coisa deixa eu ver aqui vamos pegar aqui nos exemplos da documentação que eu já não me lembro Ah é só deixar como priority mesmo então deixando só para pror ele vai passar como true e vai funcionar aí outra coisa que a gente precisa passar aqui pra nossa imagem também usando essa diretiva é o with e

height por quê Porque isso evita layout shift tá da nossa página o que que é layout shift layout shift é quando a página carrega pro usuário ele já vê a página E aí do nada pum muda o design da página do nada aplica o CSS ou do nada pum suja uma imagem isso é layout shift vocês já devem ter visto isso esse tipo de layout shift é quando a gente carrega uma página E aí a página tá toda zoada parece que não carregou os estilos daquela página e do nada carrega o estilo e ela fica

bonita isso é um layout shift por exemplo E aí quando a gente não carrega uma imagem na tela causa muito layout shift porque a imagem Ocupa um lugar então enquanto Aquela imagem não tá ocupando o lugar os outros componentes estão ali se espalhando seguindo as regras do CSS e a quando aquela imagem surge P ela empurra as coisas pro lado ou para baixo e aí tem um um grande layout shift também então declarando o wif e o height a gente vai fazer com que a gente Evite o layout shift por quê Porque o angular já

vai separar o tamanho exatinho daquela imagem ali no HTML já vai deixar ali separadinho o tamanho dela vai est em branco mas o tamanho dela vai existir Ali vai evitar layout shift então aqui pro nosso header a gente vai colocar um e um height do tamanho que eles tiverem vamos olhar lá no figma aqui 150 e height 200 P Mas e se a minha imagem mudar de tamanho dependendo do do do tamanho do dispositivo né Se eu tiver responsividade aqui na documentação explica exatamente como fazer tá a gente consegue definir exatamente o tamanho para cada

tamanho de tela para cada Break Point a gente consegue colocar o with F height aqui definindo tá então Não se preocupem Tem suporte a isso também então eu não vou usar agora a gente não vai fazer layout responsivo não é o nosso objetivo mas ã tem como fazer tá lá na documentação certinho os outros atributos aqui eu não vou explicar vou deixar aqui para vocês lerem depois se vocês quiserem e o próximo só que eu vou pegar é esse atributo aqui de loading o que que esse atributo de loading seta né ele define como Aquela

imagem vai ser carregada ã Como assim se ele tá com o loading como lazy a gente diz assim pro navegador olha ó essa imagem aqui não é prioritária essa imagem não importa muito agora pro carregamento inicial da minha tela então carrega ela só depois quando tiver carregado todos os recursos lazy loading carregamento preguiçoso tá eu não preciso dela agora ela tá lá no fundo tá lá no footer sei lá não vai aparecer pro usuário na primeira vez que carregar a tela Então não precisa dar prioridade ou se eu colocar como eiger eu vou dizer pro

navegador que eu quero que assim que o elemento HTML seja processado ali no navegador já busque a imagem que aquele elemento HTML faz referência e esse aqui é o comportamento padrão do HTML Mas a gente pode mudar pro comportamento de la usando o o la load usando a propriedade loading aqui ã beleza aqui a gente não vai colocar porque essa nossa imagem aqui essa aqui não é prioritária nada esse aqui é o header Então essa aqui eu não vou deixar como priority esse aqui é o logo né do do header então não vou deixar como

priority e agora vamos setar aqui o CSS desse cara então que que a gente vai colocar aqui a gente vai selecionar o nosso we header E aí esse nosso app header vai ter um display Flex um justify content Center e um al item Center porque eu quero alinhar a imagem bem no centro da tela e agora eu vou usar esse App header aqui na minha home então app header vou usar aqui a minha home vai ter que importar o header component E aí eu vou declarar lá no meu App routes a minha primeira rota o

pef vai ser só barra então pef da home e o componente vai ser o meu meu Deus me perdi no teclado o meu home component vamos iniciar a nossa aplicação npm start e eu vou ler aqui que temos ã mais um super chat do Rony Então Valeu demais Rony pelo pelo super chat pelo carinho ele mandou o seguinte ó eu tô começando a estudar desenvolvimento agora estou pensando em fazer uma graduação na sua opinião é um bom momento ou É melhor ganhar my XP antes de pensar nisso Olha se tu pode fazer faculdade se tu

tem tempo se tu não trabalha ou enfim mesmo que tu trabalhe sobre tempo para fazer faculdade eu começaria o quanto antes por quê mesmo a faculdade seja sendo bom pro currículo é um diferencial as empresas olham para isso sim diferente do que muitas pessoas pensam tipo eu ainda não sou formada já trabalho mas mesmo assim as pessoas olham para isso tá quando eu fui contratada por exemplo Meu chefe me falou ó é do nosso interesse que tu te forme Que tu seja graduada é interessante pra empresa a empresa olha para isso com bons olhos tá

e várias outras empresas fazem isso também então eu começaria o quanto antes porque mesmo sendo bom pro currículo mesmo as empresas olhando para isso muita coisas da faculdade às vezes não são tão atualizadas com o mercado são um pouco antigas ã não são coisas que a gente vai usar no nosso dia a dia então se tu deixar para ganhar mais XP E aí por exemplo começar a trabalhar e entrar pra faculdade tu vai te sentir muito desmotivado talvez e E aí tu vai querer largar a facu porque tu não vai est vendo coisas da facu

que estão te agregando no teu trabalho que tu já tem agora se tu começar o quanto antes já começar matando cadeira tu tu tu tu fazendo mais rápido ali focando na facua adiantando as coisas aí buscando um estágio ou buscando um trabalho como Júnior tu já Vai adiantando as coisas e aí quando tu conseguir um trabalho já ou conseguir um estágio tu já matou algumas coisas da facu E aí vai matando aos poucos e aí consegue terminar eu vejo com esses olhos tá porque por exemplo se eu começasse a fazer facu hoje hoje eu não

faria até o final porque é muita coisa que eu já passei em muitas cadeiras Muita cobrança da faculdade eu eu trabalho eu trabalho eu estudo em Faculdade Federal então bom já sabem né a fama das das federais para cursos de exatas Então a gente tem muita coisa para entregar muito trabalho muita cadeira pegada assim sim que tem que estudar bastante para passar e hoje eu já tô num adiantado assim num nível no meu trabalho que eu já tenho pouquíssimo tempo pra faculdade faço bastante coisa no meu trabalho Fui promovida recentemente tenho aqui o canal também

então muita coisa para fazer e a faculdade seria uma das minhas menores prioridades porque não ia est pagando minhas contas por exemplo então talvez Eu largaria Mas como eu comecei já tem tempo já matei quase todas as cadeiras tô na finaleira falta três só para terminar meu vou matar e é isso E aí acabou então eu eu eu recomendaria isso Tá Mas isso é totalmente a minha visão outra pessoa pode ter uma visão totalmente diferente da minha quem tiver uma visão diferente Coloca aí no chat vamos ajudar o O Rony nessa decisão uma decisão importante

um momento importante assim para nosso início de carreira Então quem tiver outra experiência aí para compartilhar com o Roni Coloca aí no chat acho que vai contribuir bastante mas essa é a minha visão começo quanto antes para já ir adiantando as coisas e E aí depois só matar a facu boa então colocamos aqui o nosso componente Nossa rota Vamos acessar aqui a nossa tela para ver o que que rolou invel configuration PRF Ah porque eu coloquei uma barra e não pode ser só um Slash aqui se eu quero pegar o pef vazio é só uma

string vazia e aí provavelmente ele deve renderizar Então cadê Aqui local host Beleza já tá carregando nossa imagem já temos o nosso header Bora partir pro próximo que que a gente vai construir agora vamos construir essa S aqui essa sessão principal Então bora lá vamos colocar isso dentro do Home component eu vou criar aqui uma tag M então por exemplo eu tenho meu B seguindo HTML semântico aqui olha só eu tenho meu Body aí dentro do meu Body eu tenho meu header a próxima tag depois do header é legal se o m que é onde

vai est o conteúdo da minha página dentro do meu m eu vou ter uma sessão a primeira sessão da minha página aqui dentro eu vou chamar de vou dar uma classe de Main section sei lá não sei se ess é a melhor classe para dar mas é a sessão principal ali né a sessão inicial da nossa página vou dar como Main section aí aqui dentro a gente vai ter uma div que eu vou chamar de headline e eu vou ter a minha imagem a minha imagem passando NG source também vou usar aditiva NG source ã

a aqui dentro do meu rline eu vou ter um H1 e vou ter um spam esse spam é aquele Kiper consultoria que tem ali em cima consultoria e aqui o H1 é aquele texto ali vamos ver aqui cadê cadê cadê esse texto aqui a consultoria que você busca para o seu software Então vamos colocar aqui dentro beleza e aqui o Source vai ser a nossa imagem que a gente vai baixar então vou baixar aqui a imagem no figma eu deixei ela aqui do ladinho também para quem quiser usar Então é só vir aqui Export e

jogara aqui pra minha pra minha aplicação eu exportei ela como component um Então vou renomear vou renomear para principle tipo imagem principal e lá no meu HTML eu vou colocar como assets barra assets bar principal P png eu vou ter que colocar um edf height Então vamos pegar lá do figma vamos voltar lá wif deixa eu ver aqui por esse wif aqui tá ruim né Não não se apeguem ao figma porque fui eu que fiz a grande maioria eu me inspirei em outros figmas mas eu que fiz aqui o o layout né então talvez não

esteja dos melhores porque afinal das contas eu não não sou designer tenho pouco conhecimento disso só tentei deixar um um pouco bonitinho mas aqui o wif e o height não tá muito legal tá quebrado aqui mas enfim wif 669 669 e o height deixa eu ver height 536 galera quem tá assistindo aí a Live a gente tem aí 533 pessoas assistindo a Live gente é gente para caramba sério isso Isso me deixa muito feliz deixa muito feliz mesmo tipo ver tem toda essa galera querendo aprender um pouco mais sobre programação trocar uma uma ideia experiência

aqui no chat isso me enche de orgulho mesmo a comunidade que a gente tem criado aqui sério Fico feliz demais não às vezes algumas pessoas acham Ah tá exagerando para mim é uma baita conquista a gente juntar Tanta gente assim interessada em aprender em divulgar conhecimento em ajudar a comunidade Então parabéns para todo mundo que tá assistindo aí Obrigada e enfim o que eu queria pedir é para deixar o like se inscrever aí no canal isso ajuda demais o canal eh a alcançar novas pessoas isso ajuda o canal a ganhar mais notoriedade enfim isso ajuda

o canal por vários motivos Então se puderem se inscrevam deixem um like aí que ajuda de verdade e Valeu de novo Fiquei até feliz eu não tinha visto que tinha tanta gente na Live massa tá colocamos o with F height ã vamos customizar agora né é isso acho que não tem muito mais aqui o que a gente fazer vamos criar aqui então o nosso no nosso home component.css Vamos colocar os estilos que estilos são esses primeiro a gente vai estilizar a nossa sessão não a Nossa main section então Main section A Nossa main section vai

ser display Flex ã Flex justify content Center Ally items Center então alinhar tudo ao centro aí o que que eu vou fazer eu vou colocar aqui um Flex Direction como Colon Por que Colon fe porque vai ficar um embaixo do outro e não um do lado do outro como deveria eu vou tentar fazer uma mínima responsividade aqui tá só para não ficar super quebrado quando para um tamanho de tela menor e aqui eu vou colocar uma media query de min with min wif de 1080 pix E aí eu vou selecionar essa Main section e trocar

o o Flex Direction dela para Row que aí quando a tela for um pouco maior deixa um do lado do outro quando a tela for menor Colocam um embaixo do outro para não para não quebrar tanto claro que o tamanho da imagem já vai quebrar tudo mas enfim só para não ficar tão terrível mas o objetivo da Live hoje não é trabalhar com responsibilidade mesmo senão não ia dar tempo tá criada a Nossa main section vamos customizar agora o nosso spam e o nosso H1 H1 ô vamos ver os tamanh deles os tamanhos o nosso

Spa tem o tamanho 20 pix e Font weight bold então Font size 20 pix Font weight bold que é 700 o h o H1 tem tamanho de 72 e Extra bold que é 900 então Font size 72 pixs Font weight Extra B que é 900 a dar uma olhada aqui a gente tá vendo que eles usam a a Font Family Roboto e aqui a gente usa Poppins Então a gente vai ter que importar isso no Google Fontes Então vamos ir aqui no Google fontes e vamos importar essas Fontes aqui pro nosso pra nossa Landing page

pra nossa aplicação a Robot já tá aqui vamos importar ela E aí quais versões da Robot a gente vai usar a gente vai usar aqui deixa eu ver a Roboto Extra bold e a Roboto bold se eu não me engano o resto é tudo Poppins é Poppins aqui é popins também acho que só aqui é Robot então Roboto b e exra bold Então vamos vir aqui selecionar todas não quero todas quero só a Extra bold e a bold E aí a gente vai fazer o seguinte ó a gente vai copiar esse link aqui ó só

esse linkzinho aqui tão vendo só esse linkzinho aqui do útimo a gente vai copiar e aí a gente vai vir aqui no nosso styes CSS e vamos colocar o Import aqui então @import e vamos colocar a URL só isso aqui já vai bastar pra gente importar esse essa fonte Family aqui pra nossa aplicação tá a gente já vai conseguir usar e aqui a gente coloca então um fonte Family de robô boto e aqui s serif para substituir e eu vou colocar isso aqui na raiz da section porque a vai se aplicar pros dois se a

gente voltar aqui a gente já tá vendo o robot sendo aplicado tá aí tem mais algumas mudanças que a gente vai vai já vai fazer aqui no nosso Style CSS a primeira delas é tirar o margem a margem com a margem zero e o pad de todos os componentes a gente que vai setar isso vamos evitar aqui usar os estilos padrões que o HTML já tem vamos remover e vamos colocar aqui também um box sizing de border Box como padrão beleza voltando aqui a gente já deve ver tudo sem sem margem beleza e agora a

gente já vai importar a Poppins ã já vamos gerar Poppins aqui gerar já vamos importar Poppins aqui então vamos procurar Poppins vamos importar aqui os tamanhos certos então que tamanhos da Poppins a gente utiliza é o regular 400 né semibold que é 600 aqui é regular Aqui é aqui não era para ser open S era para ser Poppins é a Poppins bold deixa eu ver Poppins bold então regular semibold bold e aqui é o quê semi Bold tá então é regular semibold b então vamos ver aqui em Poppins e vamos get Font get code e

vamos pegar aqui regular 400 bold e semibold que é o 600 e importar o link aqui colocar lá no nosso Styles P CSS colar aqui Opa peguei o link errado Galera vocês estão estão com tudo hoje hein mais um super chat o Dan mandou o seguinte ó gerar imagem com textos esqueci de explicar Pera aí Ah tá ele mandou o seguinte ó dica para geração de textos no chat APT escreva o texto que você quer replicar na ai e coloque em uma fonte grande recorte salve como uma imagem depois é só pedir para utilizar o

texto como exemplo ah dica Ah boa boa boa boa o Dan deu uma dicaa boa aqui de como gerar imagens no chat PT imagens parecidas com o que tu quer né porque às vezes a gente coloca lá para ele e ele gera umas coisas bem bizarras depois eu vou mostrar para vocês minha conversa com ele ele ele se perde quando a gente quer colocar quando a gente quer colocar texto na imagem Ele se perde mesmo e cria umas coisas meio bizarras assim e rosto de ser humano também ele cria super bizarro não sei se vocês

já viram eu vou mostrar para vocês depois ali as imagens que ele gerou fica meio estranho a o Dan deu a dica assim ó para gerar imagem com texto Pelo que eu entendi escreve o texto que você quer replicar que aí a faça né na na imagem com uma fonte grande recorta e salva como uma imagem aí manda para ela né recorta tipo a tela manda para ela como uma imagem e perde para ela usar aquele texto ali como base né para gerar a outra imagem então uma boa dica eu nunca tinha feito assim e

Valeu pelo super chat Dan tamo junto o Dan é membro aqui do canal O Vini é membro aqui do canal então valeu também pelo super chat ele mandou o seguinte ó ã poderia dar uma passada rápida sobre a estrutura de passas gerada pelo ing do angler o conteúdo todo estou pegando mas já veio muita coisa de base só na geração do boiler beleza posso passar aqui por cima Então vamos repassar aqui a estrutura do angular quando a gente gera um projeto angler ele gera esse projeto aqui que que tem aqui primeiro as configurações do typescript

pra gente conseguir usar typescript na aplicação o read me o Packet Jason para declarar as dependências e o angular Jason que declara as configurações do angler declara configurações de build configurações do próprio SAS pra gente usar sas o output do build esse tipo de coisa fica aqui no angular Jason e aí tem aqui o server TS que vai ser o server que vai servir a nossa aplicação estática é esse arquivo aqui que é o nosso server tá que serve a nossa aplicação estática que fica rodando na porta 4000 aqui no caso eh na real não

ri esse aqui não é o da aplicação estática mal eu galera esse aqui é o do ele é o da aplicação estática mas a gente também pode usar tipo api tipo aquele barra api que nem a gente faz no next Sabe eu Ainda não peguei muito bem as coisas aqui do ssr do angler mas esse aqui é como se fosse o server que vai ficar ouvindo e Serve sim o nosso HTML Mas ele também pode servir como uma pzinha praa gente chamar e fazer alguma serverless functions ó ele até coloca aqui dá para fazer como

isso aí dentro da pasta source vai conter as pastas da nossa aplicação mesmo os componentes da nossa aplicação configuração de rotas esse tipo de coisa daí dentro da pasta sorts a gente tem os assets que é onde fica as imagens como eu falei para vocês que vão ser servidas nosso index HTML que é o arquivo de entrada da nossa aplicação né o nosso index dentro do Index HTML ele puxa por app app root que é o componente root da nossa aplicação que é esse componente app aqui aí a gente tem aqui também do lado do

Index HTML o server TS que faz o Bootstrap do server Bootstrap Seria tipo pontapé inicial iniciação do server passando o app component e as configurações e o maints que faz aqui o Bootstrap da aplicação angular daí que inicia a aplicação angular esse aqui inicia o server que vai servir a aplicação angular o Style CSS é o arquivo de estilo Global da nossa aplicação então tudo que a gente quer que seja global coloca aqui dentro porque os estilos que a gente colocar dentro dos nossos componentes eles são escopos são modularizado somente para aquele componente não vão

afetar os componentes de fora aí o componente principal da nossa aplicação é esse App ele vem por padrão sempre quando a gente gera uma aplicação angular todo componente é formado por um template HTML um arquivo CSS e um arquivo TS um arquivo typescript que é onde a gente declara a classe que representa esse componente todo o JavaScript do nosso componente a gente coloca dentro dessa classe todo HTML dentro do template HTML e todo o estilo dentro do CSS E aí já vem aqui por padrão também as configurações do server e do app e depois a

gente vai mexer aqui nas configurações do app também e o app routes o app routes é o arquivo onde a gente declara as rotas da nossa aplicação esse App routes é usado aqui no nosso componente root no app aqui ó esse router outlet basicamente serve as rotas declaradas aqui nesse app routes E aí eu criei a pasta component fui eu que criei e agora criei tô com esse problema de falar que nem uma gringa meu Deus ã eu criei essa pasta aqui components e coloquei aqui o rer e a Ai meu Deus eu tô muito

essas piad estão muito ruim desculpa galera desculpa ã eu criei a pasta components e coloquei aqui o header e o e a home que é a que a gente tá mexendo o header a gente já criou e a home é onde a gente tá mexo agora que são componentes que a gente criou e é isso fiz um overview rápido como tu pediu mas acho que já deu para entender mais ou menos aqui como se organizam as coisas e as passas aqui do angler eu tô eu tô praticando muito inglês é Deve ser isso mesmo ai

que horror eu assassinei o português aqui já umas 500 vezes cois eu assassinei o português e o inglês ao mesmo tempo né porque é uma mistura não é nenhum dos dois e o Caio perguntou o Anger 17 não precisa mais importar módulos não esse tipo tu pode usar módulos ainda no angular 17 tu pode habilitar e usar mas o mais massa do angular 17 é o standalone components que eu expliquei no início da Live então depois se quiser assistir que agora os componentes colocam as suas os seus importes os seus providers aqui na declaração deles

e a gente não tem mais aquela coisa de módulos se a gente quiser usar os standalone components aqui colocando essa Flag de standalone como true no componente Então bora continuar até me esqueci o que a gente tava fazendo Ah criamos a sessão principal já criamos as estilizações e agora a gente precisa importar aqui no nosso home component o a diretiva a NG optimize image que a gente tá usando também para que ele consiga renderizar a imagem aqui na nossa tela porque ele não tava renderizando Bele já tá tá indo tá tomando jeito agora vamos colocar

as cores aqui dos nossos textos certinho né que tem essas duas Esse roo mais escuro e esse cinza aqui então vamos declarar como variáveis do nosso CSS como é que a gente vai fazer isso a gente vai vir aqui no Styles CSS na real não vamos criar um novo arquivo um arquivo aqui na na pasta source mesmo que eu vou chamar de variables eu vou chamar de color variables CSS aqui eu V declarar as variáveis de cor usando a anotação do do SAS né a gente vai usar anotação do SAS aqui então como é que

eu vou fazer eu vou declarar aqui usando a sintaxe do SAS que é colocando o cifrão na frente eu dou o nome da variável como por exemplo primary text que é Aquele roxo escuro aqui esse aqui eu vou vir aqui vou colocar aí eu vou ter também o secondary text que é aquele cinza e já vou colocar aqui eu vou ter também a minha primary color que é Aquele roxo primary color é esse roxo aqui de trás que eu uso eu uso aqui também deixa eu ver é esse roxo Aqui começa com 84 então colocar

ele aqui e a secondary color que é Aquele roxo escuro esse roxo escuro aqui colocar por enquanto são essas Ah tem o roxo Claro é esse roxo Claro aqui ó que eu tô usando para essa letra que eu vou chamar de soft primary sei lá soft primary eh Light primary color e eu vou colocar como esse aqui E aí agora a gente vai ter que importar essas nossas variáveis para conseguir usar nos nossos outros componentes onde é que a gente pode importar eu vou tentar importar aqui no Style mesmo para aplicar diretamente para todos os

componentes Então vou colocar aqui @import ã very color variables P SAS ã eu não sei se vai funcionar isso vamos tentar usar aqui eu vou colocar o Color como primary color só pra gente ver se vai funcionar é ele não não aplicou undefined variable Então deixa eu pensar acho que URL sim talvez funcione funcionou eu acho vamos ver não funcionou hã e o var var não precisa para variável de de SAS a gente acessa assim mesmo hum hum pera aí deixa eu tentar pon barra ponto barra color verbals pcss vamos ver não Ah puts e

agora eu vou tentar fazer o seguinte botar como primeiro aqui eu vou tentar importar lá na home vou tentar ir lá na home e importar isso aqui então na home eu vou colocar o Import lá em cima Os imports tem que sempre ser aqui em cima tá no SAS e eu vou fazer o seguinte dois pontos barra dois pontos barra dois pontos barra funcionou Eu não sei dizer porque que não funcionou lá no Styles vou ter que pesquisar depois deve ser alguma forma diferente de importar aqui quando for Global mas por enquanto vamos deixar aqui

aplicando para home mesmo que já já deu b e aqui não é primary color é primary Text e o spam vai ser a color secondary text secondary T vamos voltar aqui boníssimo beleza vamos continuar a nossa Main section também vai ter que ter um pading de zer em cima e embaixo e nas laterais Fechar isso aqui n deixa eu ver aqui quanto é que é 71 70 pi então de p nas laterais 70 e a gente voltando aqui pring page boníssima tá Já temos um avanço beleza vamos partir próximo aqui que é esses benefícios Então

vamos criar aqui embaixo uma nova são a gente vai chamar talvez de benefit section tipo são de benefícios eu tô olhando aqui o chat tá por isso que eu tô olhando pro lado dá um margem left e right com essas mesmas dimensões Ah não será que margem seria melhor do que pading não sei eu gosto de usar pading quando eu quero dar espaçamento assim dos lados mas enfim o João pô usa pô usam tem o Wind de CSS é coisa do passado não é nada eu uso CSS no trabalho uso SAS assim no trabalho todo

dia todo dia não mais porque eu tô quase passo meus últimos as últimas teses que eu atuei quase foi Java só até eu falei no no Instagram esses dias tava até com saudade de um frontend tanto Java que eu tava trabalhando aí depois eu lembrei de CSS e perdi a saudade do do frontend mas assim a comunidade angler usa bastante o sas tá é bem forte mesmo Claro cada empresa usa o que preferir o que a equipe escolher ali vai ter empresa que vai usar te Wind outra empresa vai usar sei lá até me esqueci

outro components ninguém mais usa sty components também mas sei lá se quiser usar no react enfim Bootstrap pode usar também mas eu vejo bastante gente do angler usar o usar o sas e é é bom de usar o sas Ele oferece bastante facilidades assim pra vida também usa CSS simplão ali de boas mas out outra Live a gente pode usar tem o também se vocês quiserem não tem problema Bele Vamos criar aqui a nossa benefit section então eu vou criar mais uma sessão e eu vou chamar vou dar Class para ela de benefit section nela

eu vou ter o meu benefit data que é esse dado aqui né de 5% E aí depois esse textinho que é um parágrafo então um p esse meu parágrafo vou copiar aqui vou colar esse escalabilidade que tem que tá em bold Gradiente eu vou colocar numa tag B E aí o 95% das empresas Vou colocar aqui dentro e aí vamos estilizar e aqui eu vou colocar um BR para quebrar a linha Obrigatoriamente tá vamos estilizar aqui então a gente vai ter a nossa benefit section olhando o chat ver não tem nenhuma dúvida por enquanto tá

a nossa benefit section vai ser display Flex também Flex Direction começar como col E aí no tamanho maior aqui de tela a gente quebra Row para ficar um do lado do outro para ter um Mimo de cividade possível né a items Center e justify content Center também wif 100% será que eu coloco acho que eles já estão pegando o wif de 100% Aqui eles já estão pegando então colocar o pading igual da classe de cima então pading de 0,70 pixs vou criar uma classe para isso tipo vou criar uma classe Olha só vou tentar inventar

vou vir aqui no Styles e vou declarar algumas classes globais aqui então sei lá p 70 e vou criar essa classe e aí eu uso essa classe P 70 tanto aqui quanto aqui eu crio meu próprio olha só jura jura que tá seu PR Mas enfim e já ó ficou legal aí eu já reaproveito não preciso ficar R declarando tá cont tá aí vamos utilizar aqui o nosso isso aqui eu vou colocar num H2 P H2 ou TR não sei A3 acho que é melhor pra semântica não tem que ter um H2 né como não

tem H2 vai ser um H2 tá E aí um parágrafo vamos estilizar o nosso H2 meu H2 vai ter fonte Family como Poppins em vez de eu colocar aqui eu vou colocar para todo mundo ter Font Family Poppins e s serif né Sem serifa Então não preciso colocar o Font Family Vou Precisar só colocar o Font size Font size vamos ver hum 60 e Font weight é Roboto Ah é Roboto essa aqui também achei que era popins tá mas aí a gente coloca lá fonte size 60 pixels Font weight semibold então 600 é semibold né

é e Font Family Roboto Family Roboto san serif tá color color é o primary text se eu não me engano olhando ali rapidamente parece o primary text não é preto mas eu vou trocar para primary text para ã padronizar aqui a nossa tela então é primary text tá E aí esse headline aqui tem um border embaixo então aqui eu vou colocar tipo um border B border botom de 10 pi Solid E aí passando a nossa cor lá que é Cadê as variables essa aqui secondary color passo aqui secondary color e deixa eu ver como é

que ficou Reload Não pegou por que que não pegou o headline não é headline o nome Ah é benefit deira Nossa que da onde tirei headline benefit deira vamos ver aqui tá tem que ter só um espaçamento deixa eu ver quanto é que é o espaçamento eu coloco como um pading 47 nossa eu como designer sou uma ótima programadora né 47 tá pading borum de 40 vou colocar vou arredondar vou deixar redondinho 40 tá tá bom deixa eu ver se ele tá com wif de 100% isso aqui é Tá eu mudar vai mudar alguma coisa

não né já tá pegando tudo ele só tá colocando tudo no meio porque tem espaço sobrando tá então eu tenho que aumentar o o tamanho desse desse parágrafo aqui para deixar ele no no tamanho certo então o meu parágrafo Esse sim é fonte Family Poppins a gente não precisa declarar de novo porque já tá declarado lá Global fonte size dele 40 pixs fonte Style telic deixa eu ver se ele vai pegar o Itálico eu não importei mas ele pegou tá e Font weight Font weight desse cara aqui é um Light light 300 acho que eu

não importei o light é o 300 mas é só ir lá e mudar o RL de Import Então é só vir aqui importar o 300 também então boto 300 ponto e vírgula e eu vou ter o 300 automaticamente e eu venho aqui coloco Font weight como 300 voltando lá na nossa Landing page Beleza agora a gente tem que mudar a cor dela Qual é a cor a cor tá como o preto então é a cor que está E aí a nossa escalabilidade a gente vai ter que deixar como Gradiente eu vou jogar aqui no Google

ã text gradient CSS Eu sempre venho nesse site aqui tem um codigo Zinho aqui já de exemplo e é o que a gente vai usar Então a gente vai vir aqui no nosso dentro do nosso P tem uma tag B que é o nosso bold E aí eu vou colocar um linear Gradiente para ela que vai ir do nosso primary color até o nosso soft color lá como é que a gente deu o nome hã deixa eu ver deixa eu fechar tudo isso aqui aí deixa eu só salvar fecha tudo deixar só o que precisa

aberto aqui nosso Light primary não é soft Light primary color E é isto vamos ver aqui ele tá vindo de cima para baixo eu quero que ele venha de da esquerda pra direita esse Gradiente Então vou colocar aqui uma rotação no gradiente de 180º ele vai girar a aí mas acho que o não o mais claro fica pra esquerda o mais claro fica pra direita e o mais escuro pra esquerda Então em vez de 180º Vou deixar só 90 não é 180 mesmo mas aí Aqui eu só inverto as ordens Light color primeiro e não

É o primary Color que tá vindo depois é o secondary que é o mais escuro secondary Color aí agora ele vai vir da esquerda pra direita tá E esse aqui não é Itálico esse aqui é um texto normal então fonte Family como normal é normal é não é fonte F Style norm voltando aqui beleza tá tá ficando bom agora a gente tem que colocar um espaçamento entre esse 95% e esse P que é de aqui passamento de Nossa eu fiz tudo quebrado aqui 69 dá uma dor no coração mas tá ã um GAP entrees dois

então GAP de 70 tá tá bom e agora a gente tem que ter um espaçamento entre essas duas colunas né Essas duas sections é um espaçamento de quanto deixa eu ver 65 aqui tem 84 aqui tem 81 aqui tem 84 aqui tem 84 eu vou padronizar como 84 o GAP entre todas elas vou fazer o seguinte aqui eu vou declarar um estilo para minha Main vai ser como um display Flex li items não vou colocar li items vou colocar só Direction como col um abaixo do outro e um GAP de 84 pi voltando aqui temos

o nosso GAP perfeito partimos pro próximo né pra próxima informação aqui que é o nosso botão Então vamos criar um componente que vai ser o nosso botão primary vamos vir aqui criar um componente novo NG component aqui a gente não precisa escrever generate component a gente pode só colocar g e c que ele já sabe é os shortcuts né Gener component vai ficar dentro de components e vai ser o nosso Button primary Button primary criado e vamos comear aqui a customiz o Butt primary ol só galera na Live de hoje tá a gente já vai

partir para essa sessão aqui e essa sessão a gente vai fazer comunicação com backend tá a gente vai enviar esses dados aqui eu criei uma azinha para nós uma pzinha aqui de teste onde a gente vai mandar esse dado aqui de nome e de e-mail pra gente entender como é que faz essa comunicação essa as requisições http no ular 17 porque teve mudanças do angular da outra versão por exemplo da 16 para 17 tem mudanças tem tem alterações Então vou mostrar aqui para vocês como é que fica tá então por isso que a gente vai

quando a gente for criar aqui esse forms eu vou mostrar para vocês como é que cria um formulário do angler tá a gente vai criar um formulário vamos ter validação se tá válido ou se não tá válido Vamos colocar aqui um loading legalzinho vamos chamar api então agora aqui depois que a gente criar esse botão a próxima etapa já vai ser uma etapa aqui mais emocionante tá com mais coisas além de html CSS Então calma aí já vai chegar partes mais interessantes também com mais ã feat aqui do ang né mais funcionalidades pessoal aproveitando para

quem tá aí na Live Eu gostaria de pedir para vocês agora é eu juro que é rapidinho mas para quem não sabe tá rolando o programa tá rolando as indicações pro github Stars o Hub Stars é um programa que premeia tá pessoas que contribuíram pra comunidade tá que a gente acredita assim que que tem contribuído não só para projetos Open Source mas pra comunidade no geral se a gente entrar aqui em por exemplo sobre o programa A gente vai ver ó aqui na fac ó o que que precisa para ser uma Star pessoas indivíduos que

inspiram educam influenciam e ajudam a comunidade no geral tá então isso aqui esse prêmio vai vai ser muito importante aqui pro Canal para mim e pra nossa comunidade principalmente não custa nada indicar Então se o meu conteúdo te ajudou de alguma maneira se os projetos que a gente construiu aqui no canal te ajudaram de alguma maneira te impactaram de alguma forma ã gostaria que vocês me indicassem isso vai ajudar muito mesmo eh a ganhar esse reconhecimento aqui pro Canal e pra nossa comunidade os os github Stars T acesso a conteúdos exclusivos de antemão acesso a

ferramentas Beta do github acesso a um evento que acontece pros github Stars Então vai ser muito legal se eu conseguir participar disso e e compartilhar tudo isso com vocês compartilhar mais sobre o ecossistema do github enfim é um programa super massa assim esse reconhecimento seria muito muito bom mesmo e gostaria de pedir ajuda de vocês é só entrar aqui na aba nominate escrever o arroba das pessoas que vocês querem nomear e a causa aqui pode ser Um textinho super simples ou Um textinho mais elaborado o meu @ é Fernand Kiper tá é esse aqui o

ar do github se vocês quiserem me indicar Fernanda ker com if aqui no meio e o f é maiúsculo e o k maiúsculo também eu indiquei já a Laí que também tem um canal aqui no YouTube Super Bom ela fala sobre streaming de vídeo algoritmos também o canal dela é muito massa tem uns conteúdos top A Ana também tem um canal a Ana palestra em vários eventos pelo Brasil todo eu inclusive me inspirei muito nela quando eu comecei a estudar de Java então foram minhas duas indicadas até agora e eu tô pensando ainda na terceira

indicação porque tem muito uma galera muito aqui no Brasil de produção de conteúdo e que contribui para open source também então ainda tô me decidindo no terceiro indicado mas eu já indiquei as meninas porque elas inspiram gosto muito de conteúdo delas também elas fazem um trabalho para caramba então eu já indiquei a Laí e a Ana e se vocês quiserem me indicar eu vou ficar muito feliz vai ajudar bastante aqui o canal eu vou deixar o link aqui PR do do github Stars dominate para se vocês quiserem me ajudar quiserem ã retribuir aqui um pouquinho

todo o esforço que eu trago aqui para noss Nossa comunidade o carinho que eu tenho aqui com vocês com o canal vai ser muito massa mesmo mas era só isso vamos continuar aqui ã Opa teve mais um super chat Pô o balak mandou um super chat então muito obrigada de verdade ele mandou o seguinte ó eu sou pcd acha que teri dificuldade em conseguir emprego nessa área Olha eu acredito que não ã porque eu vejo bastante empresas querendo né promovendo Eh inclusão dentro das empresas então por exemplo até para mulheres antes era mais difícil e

as empresas têm promovido mais inclusão as pró as próprias pessoas espalham essa cultura ã eu na minha opinião acredito que não eu não sei como são as as dificuldades tipo por exemplo para para ir pra faculdade caso você queira fazer uma faculdade enfim mas se você tá estudando tá conseguindo pegar o conteúdo já consegue fazer os seus projetos não Na minha opinião não vai ser dificuldade alguma tá ã enfim essa é minha opinião mesmo acredito que que não e é isso Bora tentar bora estudar que eu tenho certeza que tu vai conseguir e Valeu pelo

super chat tá vamos criar aqui o nosso Button primary então e aí partir pro nosso forms que eu acho que é a parte mais interessante aqui da Live né que é falar de forms que é um pesadelinho pros frontends e falar deumas mudanças ali do do client mod do do HP client mod aqui pro pro angler 17 tá no nosso Button primary vai ser uma tag Button e essa tag Button vai receber um Button text de input Então a gente vai ter que declarar aqui no componente um input @ input Button text input tipo as

props do componente né que recebe vou receber um botão text que começa como vazio e mais aqui eu vou ter nesse meu componente que mais ele pode receber esse meu Button on Click né on click aqui também o on Click é um output declarar aqui com output submit vou dar um nome um submit vai ser um new event emitter aí aqui quando meu botão for clicado então no Clique desse meu botão eu vou chamar o meu a minha função submit essa minha função submit aqui da minha classe basicamente o que ela faz ela emite o

evento de submit então dis submit emit aí o que mais que eu vou ter aqui no meu botão eu vou ter eu importei o ev errado tem que ser o do angular Core por isso que ele tá dando erro tá o que mais que eu vou ter eu tenho Button text Eu tenho um submit eu tenho que saber se esse botão tá disabled então é um input disabled que é do tipo boleano e vai começar como false Vou colocar aqui os inputs todos todos perto vou ter também um loading que vai ser um bolean e

vai começar como false e deixa eu ver aqui o nosso nosso figma nosso botão ele assume duas versões aqui ele assume essa versão essa versão um Gradiente e essa versão branca imagina que é o mesmo botão aqui tá porque quem fez o design fui eu não consegui deixar exatamente igual mas aqui ó deixa eu é o mesmo botão tá então deixa eu copiar esse botão até colar aqui ou tipo aqui opa não copiei o botão aqui era para ser o mesmo botão aqui E esse botão aqui é para ser o mesmo desse só que com

uma variante diferente tipo em vez dele ser Gradiente aqui ele vai ter o fundo branco porque ele tá num fundo ele tá num fundo roo né então aqui a gente vai criar uma variante também para esse botão isso é bem comum a gente fazer no trabalho né criar variantes pros botões Então vai ter uma Variant que vai ser do tipo Button Variant e vai eu vou criar esse Button variants como um enum então enum Button variants como sendo primary como é que decara enum mesmo no typescript até me esqueci en typescript ah é assim mas

não é um enum que eu quero é um tipo mesmo é um Type primary ou me perco no meu teclado para achar o Pipe então Pipe Character vou ter que copiar aqui da internet o Pipe primary ou secondary e aqui ele começa como primary tá criamos os inputs outputs do nosso botão Vamos colocar as coisas aqui né então esse meu botão vai ter uma classe uma CL eu vou ter que injetar nela ali a variante então ela vai ter a Class Button a Class Deixa eu ver só me lembrar aqui como é que faz eh

assim sim Button mais variante eu consigo colocar Button primary ou Button secondary e aqui não vou vou colocar sempre Button E aí pode ser Button primary ou secondary Alé disso se ele tiver disabled eu quero passar aqui o disabled então toda vez que eu quero passar uma um um atributo ó toda vez que eu quero usar uma dessas variáveis aqui aqui no meu HTML eu tem que fazer um databinding aqui né injetar esse dado aqui no HTML e aí se eu quero injetar como por exemplo uma função eu uso parênteses se eu quero injetar uma

variável eu uso colchetes então aqui eu quis injetar a variável variante então para declarar a propriedade Class desse desse elemento HTML eu tive que usar aqui colchetes e passei a variante e aqui para injetar o disable da mesma coisa eu vou usar a variável disabled Class disabled o slad como é que eu posso fazer eu vou colocar aqui dentro um SP e eu vou ter meu Button Text e vai aparecer C então NG if loading not loading no caso né se não tiver carregando aparece o texto normal se tiver carregando aparece loading carregando né porque

tá em português todo o nosso site carregando e aí vamos fazer estilização desse nosso botão aqui então o nosso Button ele vai ter um border border radios de deixa eu ver quanto é que é 30 e aqui é 30 também 30 então border radios 30 pixs e mais ele vai ter deixa eu ver aqui para me lembrar Font size 24 mas esse aqui size é menor então na variante na variante secondary o botão é menor então tá então o que mais tem de geral pro botão cur cursor Pointer e e quando ele tiver disabled então

quando esse mesmo botão tiver disabled vou colocar uma opacity uma opacidade para ele de 0.6 tá desabilitado agora eu vou selecionar ele com a classe primary então o tiver ae primary vai ter a cor branca o background color background como Lar Gradiente que nem atinha colocado lá no H1 Dea copiar aqui o mesmo L Gradiente aqui coloca aqui só que em vez de Light primary aqui é só da primary color PR secondary color o Font size aqui é 20 pixels acho que a gente tinha visto ali ver 24 e é bold então 24 pixs P

weight b e um pad interno de 20 pixis pelo que eu tinha visto aqui deixa eu ver é um 20 tá quando for secondary vai ser outra história Então quando for secondary secondary a cor vai ser o background vai ser White e a color vai ser a nossa primary text o Font size é 16 e O pading interno é 20 também então deixa como 20 aqui é 20 né o pading é o mesmo então o pading bota aqui como global para todos esse aqui eu posso cortar beleza nosso botão Aparentemente está pronto agora a gente

tem que colocar o Import do como mod aqui no nosso botão porque a gente tá usando a diretiva ngif essa diretiva ngif aqui ó ngif vendo como um mod então pra gente conseguir usar ela a gente tem que importar e é isso Putz pessoal o pessoal falou que eu perdi um super chat ã mil mil perdões eu não vi Deixa eu procurar aqui de novo eu acho que eu li sim o último super chat foi do B ver se teve mais [Música] algum acho que não gente acho que eu não perdi não do Cristian hum

Putz alguém desculpa Cristian se puder mandar aí no chat de novo eu tava concentrada aqui no código Eu não vi eu sempre vejo eu sempre vejo eu sempre respondo super chats mas eu tava concentrada no CSS 1 desculpas eu eu não vi mesmo o todos os os anteriores eu respondi eu tava cuidando aqui no chat vou esperar para ver se o Christian tá aí ainda mas se não tiver eu vou buscar que depois vou assistir a Live de novo vou buscar o o super chat eu vou tentar achar dar um jeito de achar e e

mandar um e-mail talvez pegar o e-mail aqui do YouTube e responder não vai ficar sem resposta eu não se a pessoa não aparecer aqui agora eu eu busco aqui depois aí entro na conta do YouTube tento achar o e-mail e mandar um e-mail para responder mas acho que não eu não achei aqui eu rolei até onde dá aqui do histórico e não tem nenhum aqui no meio Só se foi antes do se foi antes do do bellac balak tá o mats perguntou o seguinte ó vai o usar o @if Foi uma boa pergunta porque o

@if angler foi introduzido também no angler 17 deixa eu até mostrar aqui para vocês na doc e é uma outra forma da gente usar ã o wif aqui no angler deixa eu pegar aqui é uma outra forma da gente fazer controle de fluxo né de if else aqui no angular a gente faz assim ó @if no nosso template e @ els coloca o que fica depois podemos tentar usar vamos usar Aqui vamos trocar por @if Vou colocar aqui @if loading Button text if not loading E aí um @ el Caso esteja carregando el aparece o

texto carregando é uma nova uma atualização na sintaxe do H antes a gente fazia com aquele ngif E aí eles fizeram essa atualização adicionaram essa nova sintaxe do @if eu não tenho certeza só assim vai funcionar eu acho que sim vamos importar aqui o nosso botão uma nova são na nossa home uma nova section que vai ter o nosso Button primary aí vamos passar um Button text como Fale com nossos especialistas e aqui no nosso home component a gente tem que importar O componente Button primary component e aqui faltando Não não é Button primary eu

dei o nome ah app Button primary só trocar para Button primary beleza e aqui nos estilos do Button primary eu tenho que importar as variáveis também que eu tô usando então aqui no Import aqui em cima e vamos ver se vai funcionar fale com o nosso especialistas já tá aparecendo Beleza o texto ficou muito B parece ficou muito tá muito mais bold do que parece aqui mas tudo bem deixa eu ver os espaços da lateral aqui esse botão é 40 eu acho 40 piis então o PED é 20 e 40 20 em cima e embaixo

40 nas laterais tá beleza Agora ficou melhor então vamos centralizar esse botão no meio a gente criou aqui uma nova sessão vou chamar de CTA section né c to Action é uma sessão de c to Action para chamar a pessoa para fazer uma ação que seria falar com os especialistas então CTA section vai ser um display Flex também a item Center content Center beleza vamos partir agora pro nosso formulário que vai ser o mais legal aqui o mais desafiador da Live desafiador não mas que vai ter coisas mais diferentes do que só HTML CSS Então

bora lá vamos criar o nosso formulário Então vamos vamos gerar um novo componente NG generate component News components dentro da pasta components vou chamar de News form que seria né forms da newsletter News form newletter newsletter form deixa eu ver aqui no chat para ver se pessoal não não falou nada do super chat aqui ele acho que não então tá criamos o nosso form vamos decorá-lo o nosso form vai ser um form dentro dele a gente vai ter Label inut E aí a gente duplica esse Label input puts consegui duplicar e um Button primary também

Button primary vai ficar aqui tá agora o que que a gente vai fazer em volta disso a gente vai ter uma section E aí de um lado a gente vai ter a div Tex que vai ter esse textinho aqui e o parágrafo Então esse textinho pode ser um h TR sei lá que é Fique por dentro das tendências e um parágrafo que vai conter aqui o nosso parágrafo tá agora o nosso forms nosso newsletter form precisa importar o Button primary senão vai ficar dando erro ali então Button primary component Belê Aqui tá tudo certo vou

dar uma classe para dar uma nome para essa section que vai ser form section e vamos utilizar a nossa form section aqui eu vou ter o Label name e o Label email esse aqui eu vou ter um ID name e aqui um ID e-mail e aqui o for e-mail e aqui o for name para linkar o Label com o nome estilizando a nossa form section vir aqui acompanhando o chat Deixa eu só ver se eu não perdi nada agora vou ficar pausando para ver se eu não tô perdendo alguma coisa pessoal tava só conversando ali

Belê ã o João perguntou o seguinte ó fe cheguei na Live agora você tá iniciando no front você tá iniciando o front questiono para saber se o back já foi feito ã João essa Live é uma live focada no front focada em angler 17 nas atualizações do angler mostrar como é que tá o Framework usar ssr serverid Android e criar uma Landing page tá um frontão básico o que a gente vai fazer aqui é só um forms para subscrição numa newsletter Esse backend eu já criei eu criei uma função um lambda básica que retorna sempre

200 Ok só pra gente conseguir chamar aqui pelo front e ver o funcionamento de como é que tá as chamadas de como é que estão as chamadas http no angular 17 as coisas que mudaram ou não como é que faz para construir um forms aqui então foi só por isso mas o o o foco não era o back hoje já direto tem conteúdo de backend aqui no canal lives também a gente construindo coisa do zero também tem vídeos Enfim então mas a Live de hoje não teve não teve essa parte do backend hoje vai ser

só front mesmo imagina não não precisa agradecer eu eu desculpo e peço desculpa para vocês para não conseguir responder toda todo mundo e acompanhar o chat toda hora mas não precisa agradecer não tá form se o que que a gente vai ter aqui dentro ã a nossa form section ela também vai ter um display Flex então para colocar os negocinhos ali um do lado do outro então display Flex o Flex Direction vou começar como colum também PR responsibilidade mínima items Center justify content fxst e eu vou criar uma mediaquery @mia 1080 PI E aí o

meu form section eu vou colocar o Flex Direction como Row e aqui eu vou deixar como Center e depois justify content como Flex start tá que mais a gente vai ter que colocar um background nesse cara aqui então background vai ser o meu Prime meu secondary color que é aquela cor mais escura o roxo escuro vou ter que importar as variáveis então Import as variáveis aqui do SAS e vou começar a usar isso na home já pra gente já conseguir visualizar vou vir aqui embaixo da CTA section e colocar meu newsletter newsletter form esse meu

le form tem que est aqui nos imports da minha home component então V colocar aqui newsletter form component e ele deve ter colocado um app na frente por isso que tá dando erro então vamos tirar o app aqui do seletor e vamos deixar só como newsletter form beleza voltando lá já devemos estar vendo o nosso newsletter form estamos está horrível mas já vamos melhorar o pading vai ser aquele pading de 70 também provavelmente Então vamos vir lá no nosso newsletter form que a gente já criou e colocar o p 70 com P 70 já temos

o espaçamento vamos começar aqui a estilizar então estilização primeiro do H2 não é H2 é H3 né que eu coloquei deixa eu ver H3 é ponte size 36 pon weight é semibold então é 600 voltar aqui color color color color White Belê fechar aqui feixa fecha fecha fecha fecha fecha tá H tem que ter um pad em cima também aqui então PED em cima e embaixo né de deixa eu ver quanto é lá no figma não vou no olho 47 aqui 41 colocar 40 Ah mas ele vai perder os peds na lateral então vou ter

que declarar de novo não vou poder usar o pé de 70 ã na real posso fazer inherited tá ele não pegou 40 pixels por quê deixa eu ver por que que ele não tá pegando 40 Ah não posso colocar como inherited não sei da onde eu tirei isso eding initial não tá não vou poder usar o pé de 70 aqui tem que pelo menos não consegui pensar rapidamente em como não redeclarar os peds na lateral tá colocamos pad na lateral nosso botão tá estranho ainda já vamos arrumar ele vamos arrumar a primeira a cor aqui

desse parágrafo é um Poppins regular então vou ter aqui meu Deus ponte size era 16 ponte weight regular que é o 400 color White vou deixar aqui para Global voltando aqui beleza agora a gente vai fazer o seguinte tanto o meu Tex que a essa classe aqui quanto meu form vão ter Flex 1 para que eles ocupem o mesmo espaço aqui dentro dessa minha section então form Flex um e aqui Flex um e eu vou colocar um GAP vou ter que alinhar eles ao centro tinha colocado aqui um Flex start mas é no centro mesmo

Cadê o Flex ST eu coloquei pode remover os dois no centro tá E agora eu vou colocar um GAP neles um no outro um GAP de 115 então aqui vamos ver colocar um GAP quando eles tiverem Row de 115 pixis voltando aqui pro navegador tá temos um avanço como é que eu posso fazer para com que esse P aqui Fique certo eu acho que os p na lateral Ah é 120 não é 70 que nem nos outros então aqui é 120 Tá mas esse tanto de pé na lateral só vou colocar quando for quando for

desktop mesmo senão vou deixar como 70 tá agora vamos ajustar o nosso form então o nosso form Play Flex Flex Direction column Ally items Center ã justify content Flex start o Henrique mandou um super chat então Desde já muito obrigada Vamos ler aqui o que que o Henrique mandou o Henrique mandou assim ó formei em 2016 no ano médio junto ao técnico de informática onde aprendi C JS CSS HTML etc mas hoje eu sou formada em ADM e trabalho com bi né Tenho vontade de voltar a estudar vale a pena ou você acha que eu

entrei na modinha Olha se tu gosta de programação se tu gosta de tecnologia vale a pena e claro não precisa trabalhar com programação com desenvolvedor tecnologia Só se tu gosta mas aí como tu já tá em outra área já já trabalha Eu acho que a transição de carreira né seria mais por questão de gostar mais da programação acredito que seja por isso então se tu gosta eu não vejo ã o por não migrar ã Acho que não existe isso da modinha se tu te formou no ensino médio 2016 eh Não era essa Enfim acho ruim

gente falar assim modinha eu dizer ah modinha tal modinha tal Porque a gente sabe que vem modinha vai modinha eu entendi o que tu quis dizer mas não acho que a gente tem que se preocupar com isso sabe e como tu já tem uma base de c de JS de CSS HTML Pelo jeito tu te interessa pela área tu gosta senão não estaria aqui na live hoje né Eu acho que vale super a pena Sim já adianto que vai ser um caminho difícil hoje tá mais complicado de conseguir vaga as empresas aumentaram as réguas tem

bastante candidatos por vaga em cada ã o meu namorado estava participando de processo seletivo nos últimos meses uma amiga minha também um outro meu também e eu tenho acompanhado assim mais de perto os processos seletivos eu tenho visto mesmo que as empresas eu já tinha escutado o relato de vocês mas agora eu vi pessoas de perto passarem por isso então processos seletivos mais longos mais demorados a régua aumentou mais candidatos por vaga Então tá mais complicado agora no momento para entrar no mercado para conseguir a sua primeira oportunidade mas na minha opinião se tu gosta

eu acredito que sempre vale a pena o nosso mercado é Nossa área paga bem a gente não vai sair de primeira ganhando bem mas ganhando experiência ganhando conhecimento na empresa onde a gente trabalha ou subindo escalando para outras empresas a gente começa a ganhar bem comparando com outras profissões aqui do Brasil Então acho que vale super a pena tá ã a gente ainda tem essa oportunidade de trabalhar de casa Claro tem empresas que estão votando pro presencial empresas que estão no híbrido no modelo híbrido Mas mesmo sendo híbrido Olha que qualidade de vida que a

gente ganha podendo tá alguns Dias ali trabalhando de casa não ter que pegar trânsito para ir pro trabalho não ter que acordar mais cedo pegar uma condução pegar o ônibus ou aplicativo mesmo assim demora gasta dinheiro gasta com almoço gasta tempo e tempo é a coisa mais preciosa que a gente tem na vida então eu acho que vale super a pena independente do momento que seja se a gente estuda se a gente se dedica a gente h estuda ali técnicas de currículo também para tentar se chamar nas entrevistas a gente consegue uma oportunidade vai ser

difícil vai ser demorado não vou te prometer que é rápido que vai ganhar bem tão rápido nem nada mas eu acho que no final depois de todo o caminho a jornada vale a pena tá essa é a minha opinião eu acho que que vale a pena sim considerando que tu já era da área já gostava já tinha conhecimento tá aqui porque tem interesse Enfim acho que que vale a pena e tu vai conseguir reaproveitar os conhecimentos que tu tem também da tua área de adm de bi tu consegue juntar esses conhecimentos com o Dev tu

vai ter uma soft Skill muito massa assim juntando essas teus conhecimentos de adm então talvez já sejam um diferencial para ti também então Acho super legal tá continuando aqui nosso form ã pro nosso formulário é isso vamos decorar os nossos inputs o input vai ter background known Ai meu Deus background known Border border border Bottom de um pixel Solid White E aí eu vou colocar o meu forms para ter oidf 100% e o meu input também deixa eu ver como é que tá beleza agora eu quero alinhar tudo na esquerda usando a IRS Flex start

alinhei tudo na esquerda deixei ali Branco tá tá tá tem que colocar um espaçamento passamento um espaçamento passamento entre esses meus inputs então o meu input tem um he aqui né Deixa eu ver meu input tem um height de 60 pixels um 60 aqui então Vamos colocar 60 piis e o espaçamento pra Label aqui é quase nada não tem espaçamento na verdade a Label fica colada mesmo no input Então tá 60 pixs vamos ver aqui tá bem legal tá bem parecido esse meu H3 aqui tem um espaçamento Deixa eu ver com 20 então aqui no

text eu vou colocar um margem borum 20 tá vamos passar o texto pro nosso botão então Button Tex se inscreva e vamos criar esse nosso formulário a variante desse botão a gente se esqueceu a variante é com derry para ele ficar branco Ó funcionou nosso controle de variante e tem que colocar um espaçamento né nesse botão aqui a gente pode colocar um um margem borum que aqui esse 40 40 40 é um margem borum no input de 40 pixis então aqui cadê o opa na home Vamos pro input margem borum 40 pixis beleza voltando aqui

nossa tá bem bonito a cor de fundo só que tá errada Eu acho essa 36 aqui não existe parece tá então vou criar isso aqui como background secondary essa cor aqui pra gente colocar certa variables DG secondary que a primary seria o White né fech o Button newsletter background PG secondary Agora sim acho que vai tá mais parecido perfeito tá bem bonito tô achando Pelo menos vamos criar o nosso form agora então como é que a gente cria forms no angler formulários a gente vai usar o o módulo do angler de forms reativos é o

react reactive forms que chama Então a gente vai vir aqui nos imports e importar o reactive forms module esse módulo aqui do angular para criar formulários no angular aqui no notion eu coloquei algumas anotações inhas de como é que faz para criar um forms também aqui ó formulários vou mandar para vocês vou mandar aqui o angler de novo para quem chegou na Live depois do no meio da Live ou Enfim chegou agora e aí como é que a gente faz a gente importa o reactive forms module E aí a gente vai fazer o seguinte a

gente tem que criar um form group e o form group basicamente ele é uma coleção de inputs ele é um grupo mesmo de inputs então ele forma o nosso formulário e a gente tem o form control o form control é a forma de controlar um input unicamente Então dentro de um form group a gente tem vários form controls ou apenas um se o nosso formulário tiver apenas um input Então a gente vai vir aqui vou até copiar esse código e usar aqui como referência para nós a gente vai declarar o nosso forms aqui como um

atributo da nossa classe da classe aqui do nosso componente que eu vou chamar por exemplo de News letter form e é um form group E aí aqui no Construtor dessa classe eu vou iniciar esse form group eu vou fazer newsletter form recebe New form group E aí passando cada um dos inputs que vai ter nesse meu form group que vai ser o name e o e-mail e eu uso o new form control que é para controlar cada formulário unicamente e eu posso passar alguns validators para esse meus para esses campos né validadores para validar os

valores dele o meu name vai ter só um validator de required o meu e-mail vai ter validator de required e validator de e-mail para validar se é um e-mail isso aqui o próprio angler já disponibiliza esses validators para nós a gente consegue criar validators customizados nossos próprios para fazer validações que a gente precise mas aqui a gente vai usar as validações básicas mesmo de required que é para que o valor seja preenchido e aqui o dmail para saber se é um e-mail válido Belê feito isso a gente vai ter que iniciar esse form group aqui

no nosso form a gente inicia a gente linca esse form group com o nosso HTML né link com o elemento HTML ao form group fazendo isso usando a diretiva form group no nosso form E aí passando o nome do nosso forms que é newsletter forms e a gente faz isso também pros nossos form controls que seriam nossos inputs então form form control name aqui é name é o nome que eu dei aqui pro form control ó eu dei o nome como name então lá eu vou referenciar esse form control controla esse campo aqui esse input

e eu vou fazer Dea só ver aqui é não precisa colocar colchetes eu vou fazer a mesma coisa pro e-mail então aqui controla o e-mail beleza forme criado agora a gente vai controlar o on submit Desse nosso form então aqui no nosso na nossa Classe A gente vai criar uma função submit e basicamente por enquanto vai logar dis nada conso P log this. newl form pval pra gente ver os valores e a gente vai ter que passar essa função submit pro nosso button para que ele chame ela quando ele for clicado então aqui no nosso

Button a gente tem o click passando o submit deixa eu ver se é Click mesmo nome que eu dei É submit e aqui né uma função que eu vou vou passar então não é colchetes é parênteses aqui um submit para não ficar submit submit on submit on submit Belê viamos aqui pro nosso navegador e vamos preencher submeter ó name e e-mail tá certo Belê agora vamos controlar o nosso botão para que ele esteja disabled enquanto meu forms não estiver válido então aqui newsletter form pvid e aqui no caso é not valid né então quando não

tiver válido meu botão tá disabled e ele entra no modo disabled aqui a Quando Eu preencho ele se torna enabled beleza funcionando e agora vamos criar o nosso service que vai chamar o nosso backend aqui o backend Zinho que eu criei como é que a gente vai fazer isso a gente vai rodar um o angular C aqui de novo vamos fazer NG generate service agora não é generate component ã Ah aqui a galera me avisou ó muda o for do Label name fe boa aqui eu tava com e-mail duplicado bem bem notado galera eu não

tinha visto então tá NG generate service eu vou criar uma pasta Services E aí eu vou chamar de News letter vai ser o meu newsletter service Ele criou aqui o service para mim News letter service e aqui a gente vai colocar a nossa lógica a primeira coisa que eu vou colocar aqui é a URL do do nosso backend que é essa URL aqui pera aí vou vou pegar ela aqui que tá coladinha aqui do meu lado e vou colar aqui para vocês então essa URL aqui é o URL que a gente vai usar que é

o URL do nosso backend Zinho aqui pra gente chamar então vou deixar aqui como a nossa URL poderia colocar numa variável de ambiente também mas aqui não não teríamos muito ganho E aí esse meu service ele vai precisar ele vai a gente vai injetar uma dependência dele né nele né na verdade o angular vai injetar mas a gente vai de aqui uma dependência e vai ser o nosso htp client que a gente vai usar para fazer Nossa chamada http então htp e htp client e a gente vai declarar um método que é send data esse

meu send data vai receber um name que é uma string um email que é uma string e o que que eu vou fazer eu vou criar o meu daa com o meu name o mail e mail e eu vou fazer return this pp. poost passando endp URL e o meu deira e é isso e aqui eu posso já né ã declarar o tipo do retorno desse desse método aqui então eu vou esse retorno é um observable do angler o observable é um objeto que eu posso observar que ele vai me notificar quando tiver alguma mudança

é a forma como a gente lida aqui com requisições assim no angler então é um observable ã que dentro desse observable vai ter um sei lá newsletter response a gente vai criar esse tipo aqui eu vou criar uma nova pasta ao lado de components que vai ser minha pasta interfaces e aqui eu vou ter o meu à newsletter pinf PTS eu vou ter minha interface newsletter response e vai ter basicamente uma mensagem que é uma STR é isso que o meu backend retorna se a gente bater aqui na URL ó dá para ver que ele

retorna uma mensagem registrado com sucesso não vou tentar ler o ing Ai meu Deus tô ficando louca já T falando tudo errado V tentar ler o inglês reg aoas palavras com ed no final um pouco mais complicas reg cer quando a gente chama aqui ess essa URL ele já retorna vai rorn sempre 200 só por gente aqui só testar mesmo S Moc senão ele vai dar erro ó porque aqui a gente tipou o retorno do método como o observable que dentro tem um newsletter response e eu faço return aqui do this. htp ppst e ele

diz ó o http. post retorna um observable Object não um observable newsletter response então aqui a gente precisaria tipar o retorno do post também que é um newsletter response E aí ele para de dar erro aqui tá tá certinho agora o que a gente vai fazer é aqui no nosso forms usar esse service Então a gente vai vir aqui no nosso forms colocar dentro dos providers porque é um service então a gente não importa a gente coloca como provider e vai ser esse meu newsletter service ele vai receber via Construtor para ter injeção de dependência

aqui do angular ele vai injetar essa dependência automaticamente aqui para nós quando fizer o build vai ser um tipo Service vai ser o meu meu Deus newsletter service e o que que eu vou fazer aqui no on submit eu basicamente vou fazer if newsletter form P valid então eu vou fazer dis P service P send deira passando newsletter form ponto value pname e this P newsletter form ponto value pon eil e eu vou me inscrever Nisso porque é um observable então um observable h ele deixa eu só ver que erro ele tá dando aqui expected

to Ah aqui eu não botei vírgula um observable é um objeto que a gente consegue observar as mudanças dele e aqui a gente quer observar a mudança dessa chamada http a gente quer saber quando ela retornar se ela der algum erro ou se ela não der então em observables a gente faz um subscribe a gente se inscreve nele para ser notificado como se fosse quando tivesse uma mudança e aqui dentro desse nosso subscribe a gente vai colocar uma Chaves e aí aqui no complete então quando terminar essa requisição quando terminar o a emissão aqui Desses

desse observable que que a gente vai fazer a gente vai zerar o nosso newsletter form então newsletter form P reset para tirar todos os valores né resetar e não vai ser no complete vai ser no next que é quando der sucesso no next e vai ter outra coisa aqui que a gente pode fazer também que é a gente tem que né na verdade a gente não vai fazer a gente tem que fazer mostrar um loading pro usuário enquanto estiver carregando como é que a gente vai fazer isso a gente vai usar o signals do angler

o signals também é outra coisa muito massa não foi introduzida no angular 17 acho que foi no angular 16 só que veio com tudo agora or No angular 17 o pessoal do angular Tá incentivando o uso do signals que basicamente o que que é o signal o signal é um rapper em volta de um valor de um valor de uma variável que notifica os consumidores interessados por pelo valor dessa variável quando o valor dela mudar então é como se fosse um observable só que o observable quando a gente usa aqui se vocês tiverem percebido não

é do angler ele é do rxjs então uma biblioteca externa externa ou angler a comunidade angler já usa bastante essa biblioteca lá no meu trabalho a gente usa por exemplo o rxjs Ela é muito forte na comunidade angler Mas é uma solução externa não é uma solução ã fornecida pelo time do angler pelos criadores do Framework já o signal ele é ã fornecido pelos criadores do angler a galera do angler que criou entendeu ele é nativo do angler foi introduzido no angler 16 Se não me engano que foi a versão passada e há uma forma

da gente ter observables também ele é um pouco mais simples e bem mais simples de usar a sintaxe dele é bem mais simples e recomendo muito usar para quem tiver numa versão que dá suporte recomendo muito facilita a leitura do código e e é tribom não tem muito o que comentar é tem o funcionamento parecido com os behavior subjects do rxjs mas é é do próprio angler não é do rxjs então é legal usar e o e pra galera que é do react ou pra galera que é do Next é tipo o US state do

react tá é uma comparação meio Rasa mas é tipo isso é bem parecido com com us state então pra galera aí que foi do que for do react vai entender o que eu tô falando então quando a gente cria uma variável com signals a gente faz com que todos os lugares que usem o valor dessa variável sejam atualizados renderizados novamente ou sejam notificados quando o valor dessa variável mudar porque a gente precisa avisar pro HTML pro template HTML que aquele valor ali que ele tá renderizando na tela mudou que ele tem que mudar alguma coisa

e com signal a gente consegue fazer isso de forma bem fácil então o que a gente vai fazer declarar um novo signals aqui no nosso componente no nosso forms aqui que vai ser o load igual a News signal Deixa eu só me lembrar como é que usa não é New é só Ui desculpa galera é só signo se eu não me engano é é só signo então só declaro um novo signo e coloco o valor para padrão que vai ser falso aqui no nosso caso aí quando eu quero atualizar o valor do signo eu faço

dis ponto o nome do da do atributo né dess pon loading ponto set então com a função set eu atualizo o valor dessa variável E aí o angler sabe que esse valor tá atualizando porque eu tô chamando o Setter desse desse valor aqui e eu atualizo pro valor que eu quero então quando começar o submit eu vou setar para true quando finalizar vou setar para false de novo e para consumir esse valor a gente usa o getter desse cara aqui como é que é o getter a gente vai fazer assim ó a gente vai passar

aqui a propriedade loading pro nosso botão que ele recebe e aqui a gente vai chamar o nosso loading a assim acessando a nossa variável loading assim dessa forma a gente chama o getter desse signal E aí consome o valor que tem dentro desse signal E aí se a gente voltar aqui pra nossa tela e dar um Reload a gente vai submeter aqui e já era para est funcionando ó vamos ver tá dando algum erro Deixa eu só ver Eu devo ter esquecido alguma coisinha conso log por que ele tá dando console log eu já tirei

Ah eu parei a nossa aplicação ação não tem um erro lá nos newsletter response que eu não importei ele do local correto então newsletter response ele não tá importando ele não tá importando esse cara aqui newsletter response meu Deus can not find Por que que não gente ah parar npm start tá parece que ele tá loando aqui eu clico aqui ele vai pro local certo Por que que ele não encontra newsletter response bom não vou me apegar com esse importe aqui vou só declarar aqui em cima ele tá tá loando Ah ia dar um erro

que eu tinha que explicar para vocês uma hora ou outra tá entendemos o signo aí lembra que eu falei para vocês que mudou a forma como a gente usa o HP client mod no angler no angler 17 Isso mudou olha só se se a gente tivesse em outra versão do angler sei lá na 15 o que que eu faria eu viria aqui no módulo do meu componente Digamos que esse aqui é o módulo né porque nem existiria o Stand Alone na outra versão mas enfim eu viria aqui no módulo E aí nos nos imports eu

ia colocar aqui o htp client modle certo ia vir aqui ia colocar e ia funcionar mas não é mais assim que a gente faz não é a gente não importa mais o client module aqui nos componentes o HP client module a gente vai colocar esse provider lá no nosso app aqui no app config tá vendo que aqui no app config ele tem alguns providers tipo providers pra aplicação inteira e pra galera que é do do react sabe quando no react a gente coloca os providers dos contextos em volta das coisas ou provider do tema sabe

pra galera que do react É tipo isso aqui agora ficou bem parecido o unler e o react em alguns pontos sabe e aqui a gente vai colocar um provider que vai ser o provider do htp client Model a gente vai colocar aqui pro app inteiro até coloquei aqui para vocês o exemplo ó a gente faz um provider hp client e a gente vai passar o fat também para ele prover a a fet api no caso aqui a gente nem usou Mas eles recomendam que importe E aí assim já deve funcionar e vocês concordam comigo que

o signal ficou muito mais simples do que era por exemplo declarar um behavior subject antes que tipo assim se fosse um behavior subject aqui eu vou vou mostrar para vocês como ficaria a gente teria aqui um slad aí eu colocaria um New behavior subject iniciando o valor aí aqui eu ia fazer is pading pnex passando o valor do behavior subject como por exemplo true e aqui para consumir o valor desse behavior subject eu ia precisar usar o Pipe assink Deixa eu só pegar o Pipe Character aqui de novo que eu sempre esqueçam de ele er

no teclado a gente ia precisar colocar aqui o Pipe ay ia colocar assim por exemplo is loading e colocar esse valor aqui como um valor assn e e às vezes buga isso aqui tá então às vezes não funciona não atualiza da forma automática não reflete no HTML é uma mão daí a gente tem que colocar aqueles detect Changes no nosso componente para ele ficar detectando mudança e renderizando novamente e aí se a gente coloca esses behavior subject por tudo começa a ficar uma loucura então acho que o signal ã simplificou bastante ficou uma sintaxe super

limpa assim e muito mais fácil de entender o que que tá rolando aqui Então tá vamos voltar aqui tá bonits o nosso form vamos vamos submeter ele aqui ver como é que que que vai rolar né se inscrever carregando e deu submeteu funcionando de primeira não né tivemos uns errinhos mas funcionando quase de primeira galera confesso para vocês eu tô cansada já eu tô 2 horas me falando sem parar Falta só essas duas sessões aqui e eu vou ouvir a voz do povo tá se vocês quiserem que eu termine essas duas aqui que são basicamente

HTML CSS replicar já as coisas que a gente fez eu termino de boas terminamos a Live ou se vocês quiserem descansar também que nem eu quiserem jantar Ah eu deixo como desafio para vocês eu vou deixar o código completo no github tá então Não se preocupem para quem quiser o código completo eu vou deixar no github hoje mesmo eu ainda coloco o código lá no github para vocês eu já tinha deixado algumas partes prontas Então eu só preciso terminar aqui mas eu tô com fome quero jantar mas se você quiser quiserem que eu termine na

na Live também não tem problema vou ouvir a voz voz do povo agora o Vini mandou um super chat Valeu Vini ele mandou tá ótimo Fernanda serve como exercício é fica como exercício de casa também se vocês quiserem Nossa cana falei muito hoje tô liberada Obrigada galera Obrigada chefes assinem meu ponto por favor tá liberado o ponto boa o Wesley falou assim ó deixa PR amanhã eu tô com fome também pois é tô morrendo de fome tô com vontade de comer algo bom agora na janta Sabe aquela vontade de terminar o domingo comendo uma coisa

boa assim não sei indo que eu vou comer mas tô com fome quero comer algo bom boa então finalizamos a Live por aqui eu logo já vou disponibilizar aqui na descrição do vídeo o link do kit Hub o link do notion e o link do figma para quem quiser continuar em casa para quem quiser usar como template pros seus próximos projetos como base eu espero que vocês tenham gostado da Live se vocês gostaram deixa o like aqui na live se inscreve aqui no canal isso ajuda demais o canal e lembrando quem puder e quem quiser

também se puder me indicar lá pro programa de Stars do github Stars isso vai ajudar muito vai ajudar demais a trazer reconhecimento aqui pra nossa comunidade e todos os outros difíci que eu já tinha falado para vocês então se o meu conteúdo já te ajudou de alguma forma já te inspirou de alguma forma ã eu agradeceria muito se vocês pudessem me indicar aqui e o meu @ é Fernand Kiper para indicar e aqui o textinho o que vocês quiserem colocar qual foi o impacto que eu que eu fiz que na visão de vocês Lembrando que

o programa Git Hub Stars é para pessoas que inspiram a comunidade compartilham conhecimento contribuem para projetos open source eh palestram de forma gratuita paraa comunidade então aqui tá bem escrito né tipo que tipo de pessoas eles estão buscando para pro programa de kit Club Stars então para quem tiver na dúvida ainda também do que que é o programa tá tudo aqui no na página do kit Club Stars e é isso galera boa noite para vocês Bom descanso ã bom começo de semana para vocês amanhã obrigada por quem assistiu até aqui terminamos mais um live coding

com chave de ouro espero que vocês tenham gostado conteúdo aí inédito de 17 que vocês tanto pediram eu finalmente Trouxe aqui pro Canal e é isso bom descanso para vocês vejo vocês na próxima Live vejo vocês no próximo vídeo essa semana sai a parte dois do vídeo resolvendo o desafio backend pleno do iFood tá com aws a gente vai fazer lamida function naws conectar com S3 com SQS tá muito massa vai sair essa semana no canal e é isso bom descanso para vocês falou até a próxima Live até o próximo vídeo falou falou falou tchau

tchau tchau tchau tchau n