ANGULAR 17 NOVIDADES COM EXEMPLOS PRATICOS #angular #angular17 #exemplos #codigos

Salve galera do YouTube Meu nome é Christian willam e esse é o nosso canal de desenvolvimento e hoje a gente vai falar de angler de novo cara porque o angler agora Ele parece o renascimento do angler aí né velho e inclusive até a logo mudou a gente estava esperando muito essa alteração no angler e hoje a gente vai dar uma olhada nessas novas coisas que chegou no angular Vou tentar dar alguns exemplos aqui tirar meio da Cabeça porque eu acabei de assistir tá eu tô Um Dia Depois do evento para falar a verdade dois dias

depois do evento Então eu tô ainda me familiarizando com as coisas que chegou no angler e a ideia é trazer PR vocês aqui um conteúdo em português para que vocês entendam as novas coisas que chegou no angler E aí a gente vai discutindo que que eu acho daquilo o que que eu não acho e você deixa nos comentários aí qual que é a sua opinião sobre esses novos recursos Do angler tem muita coisa que eu tô muito animado para contar PR vocês que eu achei que ficou muito muito muito mesmo porque do jeito que eles

ouviram a comunidade em muitos aspectos assim ficou bem da hora Tá bom então antes de seguir gente me dá aquele salve lá paga esse vídeo aqui curtindo o vídeo dando um subscribe no canal aí se você curte esse tipo de conteúdo deixa seu comentário Me segue lá no no Nossa já foi o bagulho eu tenho que mudar de novo Ó Me segue lá no Linkedin Me segue lá no Instagram Me dá um salve lá beleza então bora de de Sem enrolação essa aqui é a página do angler tá gente no YouTube tá deixa eu abrir

a paradinha que eu uso para ficar fazendo certinha Então teve esse evento aqui ó Say Hello to angler eu assisti ele inteiro cara muito maneiro tá bom muito maneiro mesmo você vê o próprio time o angler falando sobre as novas coisas eu acho Da hora demais esse apoio da comunidade que que a Google dá então PR você saber o que que acontece no angler angler blog se eu não me engano Ô Com certeza não é isso né é blog. angular blog. angler blog. angler angler blog é blog. angler io então aqui o a galera do

angler posta aqui tudo que aconteceu e tem aqui um um um eh um artigo do minco getch eu não sei como é que fala o nome dele mas aqui ele fala aqui das últimas coisas introdu angular versão 17 tá as coisas que aconteceram então aqui a Gente já tem uma logo nova eu acho que essa ideia dessa logo nova aí é é mostrar sim que o que a galera que o angler tá tipo tendo uma virada de chave muito forte agora principalmente por essa questão do signos que agora vai vi de uma forma Nativa no

angler tem um vídeo no canal falando sobre sign se você não tá ainda meio por dentro da ideia dá um pulo lá para vocês vocês sentir isso legal e não esquece de ler os comentários também porque teve coisa Que eu falei no vídeo que se eu não me engano já já foi definido que vai vai ser removido também Então olha só aqui ó na versão 17 a gente tá feliz de introduz introduzir mostrar apresentar defer views which brings performance and developer Experience to the next level Cara isso aqui eu acho que assim é que você

conseguir fazer lasing loading no componente antigamente a gente fazia las in loading a nível de Rota tá ligado e hoje não a gente consegue fazer las Loading a nível de componente Cara Esse é um dos recursos que eu achei mais eu já tive algumas ideias assim do de algumas implementações que faz sentido tá trabalhando com isso aqui e a gente vai chegar nessa parte aqui então já fica acompanhando até o final do vídeo para você ver o quão que é isso em questão de Performance em questão de deixar o seu bundle né Inicial ali do

seu app menor ou seja seu app demora menos para abrir a primeira página muito também e aqui a gente tem aqui até 90% mais rápido né em runtime no processo de na hora que tá rodando com o novo control Flow né building control Flow que significa que agora mudou o jeito que a gente faz ng4 NG sut ngif esse tipo de coisa o angler Ao invés dele trabalhar com diretivas que é algo que a gente consegue desenvolver Ele trouxe para ele a responsabilidade disso porque aí ele consegue ter maior né Eh maiores performance com isso

ele Consegue controlar melhor lisso e não precisa ficar pensando em como que eu deixo isso aqui disponível em diretivo eu achei isso muito tá Inclusive a sintaxe ficou bem parecida ali com o dnet com blazer Razer não sei com ara ali e a gente vai ver isso também tá bom Ah isso aqui é da hora até 87% mais rápido para renderização de Hybrid né de híbrido isso aqui o o angler começou a dar e 67% para client Side Rander Seria tipo o angler começou a dar uma atensão Agora maior tá gente ã para ssr e

ssg tá ligado a gente vai falar disso também é eu já dei uma olhada antigamente a gente tinha que tá trabalhando ali com angular Universal PR fazer isso funcionar que é uma parada do próprio angler não é nenhuma biblioteca de fora assim só que hoje o angler trou isso de uma forma muito mais simples e muito mais agradável de configurar beleza Ficou bem legal isso também fresh New look reflecting the future looking Features of ang então isso aqui é a ideia do novo logo né brand new interactive learning Journey cara ISO aqui é a nova

documentação inclusive deixa eu até abrir ela aqui angular ó o que acontece você entrar direto no angular io que era documentação padrão a gente tem aqui em cima agora um Say Hello to angular Future home aqui beleza então se você clicar aqui em cima você já vai pra Nova documentação E aí eles fizeram aqui né Toda essa apresentação com o novo logo do angler inclusive já deve est aí você que tá assistindo esse vídeo aí o logo do angler já deve est na snail aí né eu já tô me atualizando aqui também Então olha só

angular aí você vai dando um scroll aqui ó ele vai fazendo essa apresentação parece essa apresentação do iPhone da Apple né works at n scale tal aí vem as paradinha ah love it by millions Build for everyone e tal e aí dentro da documentação agora a gente tem Alguns playgrounds que a gente consegue tá trabalhando aí no próprio navegador mesmo e testando as coisas tanto que se você entra aqui em tutorials Olha que interessante learn angular em browser a gente tem aqui ó Welcome to the angular tutorial você vai passando aqui em cima olha que

interessante isso aqui anatomia do componente então ou seja eh nesse lugar aqui ele explica para você como que funciona e à direita aqui a gente tem um painel com como se fosse Um navegador rodando aqui o Hello e um código angler aqui para que você consiga editar as coisas aqui ó né Tá pequeno para deixa eu dar mais um zoom Então olha só como que ficou isso aqui ó eu tenho component aqui e ele mostra né algumas coisas para você aprendendo e você pode aplicar o que você tá aprendendo dia diretamente aqui nesse painel aqui

o que é muito louco tá ligado e cada coisa cada cada parte ó aqui a gente tá em Anatomy of component Beleza eu vou pular por exemplo e agora eu tô em updating The component e ele coloca um caso de uso aqui para você entender essa questão diretamente aqui isso é muito louco tá Ah então você vai aprendendo mais com o angler aqui e as documentação do angler ficou muito melhor cara eu lembro que sempre foi um problema para mim olhar direto na documentação do angler no começo ela ela não é tão friendly assim nem

tipo amigável de você chegar e já entender de Cara o que tá acontecendo mas agora ficou muito melhor cara olha isso aqui cara olha isso com exemplos e tal ND modos né styling então ele foi mostrando as coisas novas que chega aqui de uma forma muito simples de entender eu gostei muito disso aqui muito disso aqui mesmo tá ficou bem maneiro essa documentação aqui achei bem mais moderno parece que eu tô olhando a documentação da api do github tá ligado bem maneiro mesmo cara deixa nos comentários aí o Que que vocês acharam disso aqui e

se agora vocês vão começar a usar a documentação mano porque tem muito post que eu faço no Linkedin mano que eu só venho na documentação e falo mano tipo eu só vou postar um bagulho aqui porque a galera tem preguiça de ler documentação porque teve uma vez que eu que eu fiz um post de NG Suit lá e a galera gostou tipo mano eu não fiz nada além de mostrar o que tá na documentação tá ligado Então V ver se agora a galera Perde a preguiça de olhar nas documentação do angle tá valendo muito a

pena dar uma olhada aqui então vamos pro primeiro tópico que é future future looking identity Eng today the Framework Love Battle e tal eu acho que esse aqui é mais para falar sobre a nova logo mesmo eu achei da hora a nova logo tá e remete um pouquinho a antiga logo e eles trocaram as cores aqui para dizer que né Tipo o nascimento do angular e tal achei até Maneira a ideia aqui e a documentação do angular Dev que eu achei muito também né a a nova maneira Interativa de aprendizado que tá dizendo aqui ah

e você pode usar até o poder da angler C e tal cara é muito interessante isso aqui eu achei muito da hora mesmo tá principalmente por parte de documentação porque eu achava a documentação do uma bosta velho então aqui a gente tá lançando Beta Preview de Def Website Então esse aqui vai ser ó pelo que tá Dizendo aqui vai ser o Website padrão do angler 18 Tá e agora a gente começa aqui buing control Flow que a gente começa a falar realmente das coisas que implementaram no angler inclusive gente ó eu vou abrir o visual

Studio aqui eu tava testando algumas coisas aqui mas eu vou abrir do zero com vocês aqui tá bom então deixa eu abrir aqui em algum lugar ó tô no Finder aqui vou criar aqui um Eu acho que já tá aberto né buguei meu terminalzinho ent V antes de você tá testando a versão 17 tá gente você precisa vir aqui dar o npm npm @ ó você reinstala usando npm @angular cli traç g de global depois que você reinstalar ela aí ela já vai est baiando a última versão já fiz isso tanto que se eu vir

aqui agora ó e executar aqui meu NG version e olha só tá tudo na versão 17 Já que é a versão última que soltou e ele tá dizendo que versão atual do node É 19 não tá suportando porque eu tenho a 19 aqui então o que que eu vou fazer eu vou vir aqui e dar um n VM use 18 tá inclusive até já fiz isso uma vez e agora NG version de novo e aí ficou bom ó comando não pô Acabei de dar NG NG version e agora ele já bugou cara deixa eu fechar

o terminal e abrir de novo entender essa aqui velho não era para bugar assim não velho Ahã novo terminal muito Zoom né cara porque o terminal do Mac ele abre pequenininho Agora consigo ó e aí eu mudei pra versão 18 Ah ele ainda tá mostrando que é 19 que deve ter dado um BO aí no nvm mas não dá nada não não vai não vai nós isso aqui não vamos gerar o um novo projeto aqui ó suavão tudo bugado V gerar um novo projeto aqui tá vai ser NG New chamar de angular 17 mesmo igual

o outro que eu tava testando Então NG New angular 17 e aqui a gente já tem ó deixa eu ver aqui se tá legal para vocês ler aí ó tentar esticar essa parada aqui para ele não ficar quebrando é ainda por mais que eu estique aqui ele ainda tá tentar rodar de novo Agora ficou melhor então ele já começa perguntando ali o que a gente tava acostumado mesmo se é CSS CSS SAS les dou enter só que agora Gente olha o Que ele já tá perguntando aqui para mim aqui ó do you want enable server

Side rendering and static S Generation ssg pre rendering ou seja Antigamente você tinha que inicializar um projeto do angular adicionar o angular Universal agora você pode por padrão dá um sim aqui e ele já vim configurado a gente vai fazer isso no final do vídeo só para mim mostrar para vocês algumas coisas aí que dá para fazer com o ssr tá como mais ou menos ele funciona então eu acho que É interessante ter os dois ali enquanto vai carregando a gente vai lendo essa parada aqui ó ah o use the new Blocks então ele tá

mostrando aqui quais são as últimas né como que funcionava gente e antigamente cara é o ng4 inclusive isso aqui até algo novo o asterisco n4 que a gente tanto usa ele não exigia o track o truck by é uma função que você passa para ele você diz como que o ng4 vai e rastrear as alterações que aconteceram ali no template quando você utiliza o Track by você tinha um aumento de performance muito grande tá ligado Então sempre era uma boa prática tá passando esse track buy aí agora com o novo tipo de controle a gente

é meio que obrigado a trabalhar dessa forma quer ver ó olha como que ficou aqui ó aqui tá mostrando como é que era E como que ficou agora ó ficou então a eu acho que assim essa questão do ar é uma questão meio dnet tá ligado meio Microsoft para falar a verdade porque a Microsoft funcionava muito assim deixa eu ver como é que tá o nosso terminalzinho aqui já rodou vamos dar para dentro então do angler 1 Vamos abrir o Code aqui então a questão do do ar para falar a verdade o que eu acho

eu acho até assim uma parada até um pouco válida deixa eu aumentar aqui principalmente o seguinte gente imagina um caraa que tava começando no angler tá ligado aumentar aqui o o bagulho para ter uma fonte de 18 bem Cego [Música] mesmo tá bom e agora se você começa a rodar o aplicativo vamos rodar ele aqui agora ele já tem até uma nova carinha aqui pra gente tá muito mais rápido também para buildar de acordo com a documentação já foi ó muito rápido mesmo o build dá para sentir aqui já tá aí ó hello angler 17

que é o nome do projeto congratulations your app is Running então tá bem maneiro isso aqui tá achei Da horinha essa tela aqui gente olha só isso aqui ó o que eu tava falando @if @ else cara para uma pessoa que chega no angler eu acho que tipo eu falo pela questão do ELS Antigamente você tinha que fazer asterisco Ó tem aqui uma comparação asterisco ngif ELS E aí você tem que declarar um NG template eu já acho isso uma uma meio que uma barreira de entrada pra galera que tá aprendendo angler porque tipo assim

a pessoa que aprendeu o básico mano como que faz o if ELS tá ligado E aí ela já tem que entrar no conceito de NG template e tal já começa a trabalhar um pouco mais os conceitos angler então a pessoa parece que ela tá estudando só pro angler ali dá uma massa de de de aprendizado um pouquinho maior eu acho meio molhado isso com o ngg fels eu acho até válido isso aí vamos testar aqui essa parada mano vamos lá então eu vou dar um vou lá no nosso app component tá então agora por padrão

gente olha isso Aqui standalone tr Ou seja eu nem passei que eu queria standalone com points por padrão ele já vem true aqui ó por padrão ele já vem true eu achei isso interessante também gostei desse negócio aqui tá achei bem válido aqui vamos Apagar tudo que tá no template igual a gente tá acostumado mesmo salvei e ele vai buildar aqui em cima de novo ficou branquinho aqui então vamos lá então primeira coisa que eu vou fazer aqui vou pôr até um H3 aqui ó vou Colocar testando if else tá coisinha simples aqui então a

gente vai ter aqui uma variável que pode ser verdadeira então é ver igual a true Beleza o nome vai ser é verdadeira E aí aqui eu vou ter o @ ngif gente @if não tem mais ngif tá E ele já joga essa sintaxe aqui pra gente Cara isso aqui também foi atualizado tá então se você tá atualizando jogando as versões novas do angular angular language service que é o que a gente Utiliza aqui desenvolvido pelo prop time do angler já foi atualizado interessante você fazer a atualização também não fiquem grilado olha escuta isso experiência própria

Não fiquem grilado com essas novas features Porque o mercado não funciona desse jeito não é porque dois dias atrás o angler saiu essas novas features que hoje todas as empresas do mundo já tá pedindo isso aqui não e outra coisa é interessante saber também como que funcionava antes o Conhecimento que você já aprendeu Até agora ele não é perdido tá bom gente porque a empresa as empresas não vai começar assim ah vamos atualizar o angler Porque sim se tipo não tiver vantagem nenhuma paraa empresa não vai fazer isso é lógico que é muita vantag de

você manter o angler atualizado por performance por um monte de coisa mas as empresas não vai exigir o angler 17 já tá ligado Então vai com calma calma sua ansiedade aí fica suave e vamos testar Isso aqui então a gente tem o if aqui é verdadeira tô perguntando se a minha variável é verdadeira e a gente faz um spam aqui dizendo que é verdadeira sim legal e a gente tem aqui também o ELS aqui agora tem o else if cara eu vou testar só o o else aqui a ideia vocês já pegaram mesmo é falso

ficou desse jeito aqui ó eu gostei particularmente ó é verdadeiro assim então se eu venho aqui e faço que é falso aí ele vai retornar é falso o ngif Normal Cris então agora já era o ngif mano vamos testar essa parada vou vir aqui vou dar um spam tá asterisco ngif ó tô jogando o ngif normal do jeito que a gente conhecia é verdadeira é verdadeira sim com diretiva ngif tá o que eu falo é que agora o angler isso aqui ó é o time do angler que controla não é uma diretiva que igual a

gente desenvolve não isso aqui é uma sintaxe do angular agora então eles conseguem Fazer mais avanços aí em relação ao algoritmo detecção de mudança que o angler agora ele trabalha com signos que é muito mais inteligente do que o Zone JS então o angler tende a ficar mais rápido quando eles trabalhavam com diretiva assim basicamente eles tinham que ficar meio que tomando cuidado tá ligado para colocar alguma coisa que não era suportado por diretiva e desenvolver a diretiva igual a gente desenvolve agora eles conseguem como eles são Desenvolvedores do angler tem muito mais controle sobre

a linguagem né então esse cara não tem que aparecer né então ele veio ess é falso daqui de cima e agora eu vou passar ele para true e vocês vão ver que vai est Funcionando aqui ó é verdadeiro assim é verdadeiro assim com ngif tá Inclusive tem um tá um na frente do outro por causa de ser spam a questão outra coisa também gente asterisco ngif ele é uma parada que tá presente aqui dentro do C mod inclusive se eu tirar Ele aqui eu imagino que d d pau não deu né Deixa eu fazer um

teste esse erro que tá dando aqui é de uma extensão que eu tenho ó lá ó k bind property of SP então como a gente tá utilizando standalone components Inclusive eu ten um vídeo para soltar você pode importar só o ngif aqui ó esse ngif que a gente importa é a maneira antiga de trabalhar com esse cara aqui embaixo ó tanto que o erro sumiu aqui não vou desligar as extensões que depois Eu vou ter que estar utilizando e agora com esse @if aqui ou @ for a gente não precisa est mais utilizando com base

nos imports aqui beleza então eu vou remover esse carinha aqui vou remover isso aqui também e pelo jeito o ngif funcionou tá foi bem maneiro eu acho bem vindo esse tipo de de alteração Eu acho que o código fica muito mais legível também tem também um elsif aqui e tem o NG sutch aqui também né cara O NG sutch agora ele funciona dessa forma aqui Achei maneiro para caraca também vamos testar esse NG sut cara vamos testar aqui eh status a o Switch é muito utilizado para status né né então a gente vai Pô status

de finalizado legal dessa forma aqui então o que que eu vou fazer aqui eu vou vir aqui no meu negócio vou passar um H3 aqui tá bom testando agora o sutch maneiro rapidão a gente testa aqui switch e aí aqui a gente vai colocar o Que que vai ser o nosso Switch Pelo que eu entendi é isso e dentro aqui ó do parece programação mesmo né cara tipo é programação óbvio só que tipo utilizar esse tipo de sintaxe aqui eu acho que facilita legibilidade e tal ke se for finalizado aí aqui dentro você passa um

span direto ó Foi finalizado Beleza vou copiar e vou jogar outros vou copiar aqui e jogar outros aqui então eu vou ter o case aqui sei lá cancelado Também cancelado então se eu mudar esse cara aqui para cancelado cancelado tem que ter o c maiúsculo aqui né Deixa eu só testar aqui cancelado foi cancelado E aí eu tenho também um outro Case que seria o case como é que é o defo é @ def é que eu ponho um spam aqui dizendo Nem um nem outro legal uma vírgula aqui só pra gente testar então ele

tem que aparecer pra gente aqui o cancelado aqui agora vamos testar aqui para ver o que que Veio testando o Switch foi cancelado deu certo tá bom Agora eu vou vir aqui e vou mudar para finalizado nenhum nem outro ou seja pelo jeito o meu finalizado foi escrito errado ó F minúsculo aqui então por isso ele tava dando ruim foi finalizado maneiro para e agora se eu escrever qualquer coisa aqui que não seja nenhum dos dois vai aparecer nenhum nem outro então maneiro também o NG sutch muito simples Tá de tá ano com ele E

agora a gente vai ter aqui também os Loops cara gente para vocês ter uma noção o jeito que o for ficou inteligente agora Antigamente ele simplesmente ficava fazendo rendering né renderizando e renderizando uma atrás da outra agora o for mano ele ele faz tipo assim você ele detecta quando você trocou um elemento de posição dentro da mesma lista tá ligado ele tem esse tipo de de algoritmo eles disseram que diminuiu o algoritmo mas ficou muito Mais inteligente tá então esse for aqui a gente vamos fazer um for aqui com Nossa vou vou pôr filmes aqui

tá E aí eu vou pôr aqui ação sei lá terror suspense gravar vídeo que a gente tira os exemplos tudo da cabeça na hora então o for vai ficar aqui ó vamos lá cadê ó testando o Switch agora testando o For legal e aqui a gente vai P aqui o @ for notem que na hora que eu dou o tab ele já vem com o track ali Agora Gente esse track ele é obrigatório então eu vou p filme aqui filmes e o track de index é o track padrão tá ligado ele tá verificando se trocou

de lugar ou não Ó vou pôr um spam aqui e vou p filme Opa mesma coisa do jeito que era o angler filme vou pôr uma vírgula aqui no final aqui não tem problema vou salvar e vamos ver se funcionou isso aqui já que eu quero mostrar uma parada do for aqui ó deixa eu diminuir esse cara ó lá ó testando For ação terror suspense deu tudo certo porém se eu venho aqui agora e tiro o track ó já já deu erro já nem builda essa parada ó for loop must have a track Expression agora

é obrigatório Gente esse track aqui ele é ele tem que ser bastante pensado na hora de utilizar com objetos tá igual aqui aqui no exemplo aqui ó ele tá utilizando com user.id ou seja na hora que trocar ele vai verificar pelo user ID se na sua lista trocou alguma coisa ali da de algum Elemento e não for o ID do user a lista nem é recarregada então tipo assim ele tem essa essa inteligência antigamente já tinha só que a sintaxe agora ficou muito mais agradável interessante pensar também que antigamente a gente utilizava o for muito

com ayn Pipe tá então isso aqui ainda funciona de acordo com os caras eu não testei ainda mas vamos testar aqui ó ó filmes dólar Então a gente vai declarar como se fosse um observable tá que retorna Filmes beleza E esse off aqui não foi reconhecido por Ah ele é do rxjs então o que que eu tô fazendo aqui gerando um observable que na hora que eu me inscrever nele ele vai emitir esses filmes aqui só isso tá bom então vamos testar aqui então então ao invés de utilizar filmes eu vou utilizar assim ó com

dólar E aí ele já deu erro aqui tá eu vou pôr um Pipe aqui para ver se vai funcionar já não deu certo tá vamos Lá sim ou não né Pelo jeito não né Deixa eu ver se o filme está escrito certo off P filmes no PIP found Beleza então vamos tentar importar o Pipe aqui de forma manual porque o PIP A5 Na verdade ele vem dentro do camon mod tá gente ó camon mod eu importei ele e aí o PIP 5 aqui agora ele deixou inclusive Vamos ver se esse parêntese aqui é obrigatório tô

testando junto com vocês Tá gente o bagulho aqui é bem sinistro então ó Testando for funcionou do mesmo jeito o erro que tá dando aqui embaixo não é um erro do angler é um erro da extensão da livelo que eu tenho essa ninguém nunca arruma ação terror suspense funcionou numa boa mesmo utilizando o Pipe Sink aqui se quiser ainda dá para fazer o filmes não isso aqui não vai rolar né pelo jeito Será que tem que ser assim é tem que ver como que C Aí Ficaria porque antigamente a gente tinha o PIP que a

gente utilizava com w n deixa eu ver se tem algum exemplo aqui no que foi passado aqui não tem ele não passou nenhum exemplo aqui mas eu vou dar uma pesquisada nisso depois eu trago para vocês aqui porque se ele aceita o PIP 5 ele também tem que aceitar o s da vida lá né que é quando a gente é tentar mais uma vez S filmes dou errado parce Missing é Deve ter mudado alguma coisa na sintaxe para fazer isso aqui funcionar outra coisa gente ele também continua funcionando as paradas que a gente tinha então

is L é igual a dó leste por exemplo de último let is L igual a dólar Leste isso aqui nada mais é que ele fala que se o se o negócio ele é o último ou não então eu vou vir aqui vou dar um spam aqui e vou jogar aqui ah é último pera Aí é último Nossa ele tá meio bugadão aqui eu acho que por causa deu p l ele bugou aqui o o meu tema é o último Então is L que eu declarei vamos salvar e vamos testar para ver se vai rolar rodou

aqui ó lá ação é último falso terror é último falso suspense é último falso suspense é o último tru aqui ó inclusive deixa eu eu vou passar esse cara aqui ó como parágrafo acho que vai ficar melhor essa parada aqui Ó vai ó lá ó ação é último falso falso suspense é último true então tudo que a gente já tinha no for tá funcionando numa boa beleza gente eh o a Pipe também tá funcionando tem que ver como que faz para fazer o s do a Pipe que a gente tava utilizando inclusive aqui ele nem

mencionou o Pipe e agora a gente tem o empt aqui também que eu acho bem maneiro que dá para colocar depois do ng4 aqui ficaria o o empt aqui que significa quando tiver vazio a lista tá então vou Pôr um p aqui e dizer está vazia Tá bom vou salvar aqui a lista como não tá vazia ele tá trazendo esse aqui ele não trouxe o está vazia em nenhum lugar porém se a minha lista realmente estiver vazia igual eu vou fazer aqui agora ó eu vou dizer que os filmes são vazios ó e aí ele

vem o está vazio aqui isso é da hora que antigamente a gente tinha que fazer um ngif para fazer isso e agora ficou muito mais interessante isso aqui tá então Bastante faz bastante sentido também da hora ter essa parada aqui Aqui tá fazendo umas comparações aqui de de performance eu não vou entrar muito nesse caso mas o verdinho significa que melhorou signific significativamente e o vermelho significa que não aí tem que analisar isso aqui para entender o porque que alguns não e o amarelo mais ou menos acho que é isso mesmo tá ã agora a

gente tem aqui o control Flow igual foi o que a gente fez aqui eles Estão pedindo pra gente experimentar o que que vem aí cara defer views mano Isso aqui é insano gente insano demais cara isso aqui faz com que o app nosso ele carregue dados cara de forma las load eu não sei se vocês estão ligado o que que é lazy load a ideia do do lasing load testando de Ferb views a ideia do lazy load nada mais é do que ele carregar alguma coisa somente quando necessário Então você tem o lasing loading de

rotas Ele só vai carregar os módulos tudo daquela rota Quando ele entrar naquela rota em específica Pode crer então isso é o las loading de rotas maneiro para só que agora a gente tem las loading dentro do componente Cara isso aqui ficou absurdo mano então por exemplo aqui ó vamos lá eu vou criar um um novo componente aqui ó vai se chamar sei lá filme beleza filme pon component.on typescript tá bom igual que a gente tá Acostumado para criar um componente mesma coisa que a gente já tava ligado @ podia usar cite tá gente mas

aqui eu tô tô tão acostumado fazer na mão que então vai ser filme tá o nome do nosso componente standalone vai ser true maneiro desse jeito aqui Ah está não quer dizer eu vou pro template aqui tá olha cara ISO aqui já é uma parada da hora de mostrar PR vocês também gente o Template já era assim então eu vinha aqui dentro do template colocava essa crase ao contrário Sei lá o nome disso e digitava meu template aqui então eu vou colocar aqui sei lá H2 aqui não vou H2 não vou um H4 aqui mesmo

e aí eu vou declarar aqui dentro ó Export Class filme component beleza e aqui a gente vai ter o nome do filme tá o nome do filme ponto e vírgula dessa forma aqui e aqui eu vou passar aqui o Nome do filme nome legal desse jeito aqui ó nosso componente nada mais é que vai mostrar o nome do fil vou transformar esse nome aqui em @ input tá bom dessa forma aqui acho que ficou da hora uma coisa que é válido falar PR vocês também gente o input ele pode ser pode passar alguns parâmetros aqui

dentro por exemplo required você obriga que seja passado esse esse parâmetro aqui na hora de chamar esse filme component aqui tá bom então beleza Chamei o filme aqui agora eu vou vir aqui né dentro do nosso app component e vou passar aqui ó eu tenho que chamar ele aqui dentro né do imports para poder estar utilizando ele então filme component legal ficou da hora isso aqui e aí aqui para mim chamar ele filme Beleza Eu fecho e aí a Por que que ele tá dando erro porque eu disse que era obrigatório lá então o nome

do filme que eu vou passar aqui sei lá Velozes Furiosos veio a cabeça agora o Angler também gente ó vai vai funcionar isso aqui se a gente olhar aqui agora normal a gente não fez nada demais testando defb views Veloz E Furiosa funcionou na hora gente eu vou abrir aqui agora o Dev Tools do angular porque melhorou bastante isso aqui ele tá dizendo o seguinte que na hora que o app Rot carrega Ele tá carregando o filme junto tá bom Por quê Porque é o que tá na estrutura aqui ó na hora que eu dou

F5 já vem o filme junto Eh só cortando uma outra coisa aqui a gente consegue fazer agora as tags que se aut fecham também tá eu acho que fica melhor aqui no código Mas voltando ó na hora que eu dei o F5 ele já veio o app Rot aqui eu consigo agora cara com o poder do angular fazer isso aqui ó deer beleza e aqui dentro do defer dentro desse bloco de defer aqui que seria de defer views eu coloco Qual que é o componente que eu quero que seja feito dessa forma defb é a

mesma coisa Que la loading e aqui dentro Eu tenho várias coisas que eu consigo colocar para mim dizer quando que esse componente tem que ser Carregado Pelo angler Então olha só vou dar um exemplo aqui eu vou dizer para ele aqui ó on View port legal quando eu falo on View port eu sou obrigado a passar um Place holder aqui que seria o que vai ficar no lugar dele enquanto e esse cara aqui não seja carregado Então vou pôr um span aqui de carregando aqui olha olha que Interessante isso aqui eu tô aqui em cima

agora ó ó vou dar um F5 de novo Tô aqui em cima ó olha o que carregou aqui carregou um ot ou seja enquanto enquanto aquele componente que tá dentro do dier ele não tiver na vista Nossa aqui ó do nosso navegador a gente não tiver chegado nele ainda o angular nem vai carregar o bagulho mano cara isso é uma é um aumento de performance muito grande cara muito grande meso mesmo porque você consegue assim quando o componente for Muito grande você não ele não vai carregar junto aqui com o componente Inicial ele fica carregando

de lado tá ligado Então agora ó eu vou scroll tô scroll devagarzinho na hora que eu chegar perto daquele componente o angular Ó presta atenção aqui embaixo Aqui gente ó presta atenção aqui embaixo Aqui no app root ó ó cheguei perto aí sim ele carregou o filme cara mano isso é muito louco velho e tem como você fazer o seguinte ó eu quero que você Carrega por exemplo Ó gente ó vou dar um F5 de novo aqui pra gente testar outra coisa aqui ó ó eu tô descendo notem que eu cheguei no título aqui ó

testando Def Ferb views e ele ainda não carregou o nosso novo componente na hora eu posso falar para ele na hora que esse cara aparecer na tela você já pode carregar para mim olha como que eu vou fazer aqui dentro eu vou abrir um parêntese aqui e vou dar um ID para esse H3 aqui que seria o nosso sei lá vou colocar como Marcador aqui beleza E aí esse marcador eu passo aqui dentro do marcador salvei vamos testar de novo aqui agora ó vou dar um F5 aqui no topo da página tô no app root

tô scroll ó bem devagarzinho ó foco aqui embaixo Aqui na hora que eu chegar ó apareceu na tela o testando defer views ele carregou o nosso componente aqui isso é muito cara isso é muito tem várias coisas que vocês conseguem fazer gente tem como você você marcar por exemplo exemp aqui Ó on Rover Ou seja é um outro tipo de gatilho Então olha isso Ó eu vou scrollar scoli e apareceu aqui ó testando defer views tá aqui ó testando defer views gente eu dei o Rover só que como eu tô utilizando a ferramenta aqui de

desenhar na tela aí ele não entende que foi um Rover ali e ele tá aqui o nosso Place holder que foi carregando na hora que eu passar o mouse em cima do testando de FAB views Ele carrega o filme mano então cara CONSEG você tem Muis fazer nisso aqui Alé disso aqui você CONSEG digitar aqui fazer um e pass uma condição aqui passar só true aqui ver se vai funcionar quando passo F lá do topo da página de novo vem carregado tem como você fazer uma Jog tipo quando Car chear checkbox carrega esse componente gigante

aqui inteiro de isso aqui é tão maneiro cara que se você for olhar aqui ó vou voltar do jeito que tava o noso Rover ó no Hover do marcador é uma das formas que tem de fazer então Tem como fazer Hover tem como fazer Click tem como fazer quando aparecer tal div na tela você carrega o meu elemento gente dá uma olhada nisso aqui ó eu vou entrar em rede aqui agora vou subir vou limpar tudo isso aqui ou seja o angular ele só vai buscar ó vai aparecer cadê ó testando deble views o angler

só vai buscar fazer o request aqui dos dados daquele novo componente do JavaScript daquele novo componente na hora que for necessário então ele não tá carregando Tudo de cara com a página isso deixa a página bem pesado então às vezes vocês tem uns componentes que faz request faz um monte de coisa e enquanto esses componente não termina o angler não mostra ele na tela agora com isso aqui vai ficar muito melhor ó vou passar o mouse em cima agora ó ó ele fazendo a busca ali dos dados daquele novo componente para poder adicionar então isso

é muito louco cara é um lasing load que a gente tá fazendo a nível de Componente tá ligado eu posso até mostrar um outro exemplo aqui que eu acho da hora de fazer com isso aqui vamos supor que aqui no meu App component aqui ó eu tenha os filmes aqui ó tem os filmes de ação aqui e esses filmes aqui tá tudo normal beleza Olha o que eu vou fazer eu vou eu vou fazer uma lógica até para brincar com isso aqui ó vou não vou não vou comentar esse cara aqui vou colocar um outro

H3 aqui tou testando mais uma vez de fair beleza e Aqui a gente tá aqui testando mais uma vez de fair ele deve ter bugado aqui né porque o o visual code ainda tá meio bugando nos nos temas aqui mas vamos supor que eu venho aqui e faça um for aí eu falo assim ó filme de sei lá Tirei essa ideia agora gente se não der pau se filme de filmes então eu tô fazendo um for de daqueles filmes lá eu posso vir aqui e fazer o seguinte ó eu tenho o filme aqui em cima

tá bom tem o filme que chama nome Velozes e Furiosos né vamos testar aqui deixa eu ver aqui como é que é o nome como é que tá aqui veló furiosa veloces furiosa veloces furiosa Beleza o que que eu vou fazer ao inv vez de ser o filme aqui vamos supor que seja como se fosse uma categoria aqui dentro dos nossos filmes aqui tá Então eu vou passar aqui um um h5 que vai ser a categoria que vai ser o o nome mesmo aqui e aí aqui eu vou ter vários spam aqui dentro tá vou

fazer um vou fazer um for aqui Usando a nova sintaxe já então @for ã item off 1 2 3 4 ponto e vírgula track dólar index Beleza então eu tô fazendo aqui ó número eu tô dizendo que na categoria tal eu vou ter aqui um spam que vai se chamar filme número de ã nome que seria a nossa categoria inclusive vou mudar invés de ser nome Isso aqui vai ser categoria is ISS é como se fosse categoria do filme Beleza dessa forma aqui ó Opa categoria E agora eu vou pôr aqui categoria também tá ficou

dessa forma que eu mudo categoria E já vai dar tudo certo categoria salvei e agora que que o fiz aqui ó Record categoria Ah aqui em cima né a gente também tá utilizando componente aqui categoria salvei e tá aqui ó filme Um de veló furios filme dois então vamos Supor que eu tenho várias categorias aqui agora aqui no nosso for aqui inclusive gente eu vejo de ser um spam aqui vou pôr um p para ele quebrar a linha ficou assim ó filme Um Só que eu quero pegar aqui no nosso app component aqui agora né

ao invés de passar aqui ó a categoria fixa eu quero passar o filme Beleza o tipo do filme então eu venho aqui e faço filme tô gastando tempo nisso aqui porque eu acho que é muito Então eu Tenho filme Um de ação filme Dois de ação filme Três de ação filme quatro de ação aí chegou na categoria terror imagina que é como se fosse um Netflix isso aqui aí tem filme Um de terror dois de terror três de terror quatro de terror imagina que você tá num sistema mano muito pesado que ele demora muito para

buscar os filmes Então você não quer carregar filme À toa então só ente na hora que chegar no no na categoria Aí sim ele vai carregar os filmes então eu Venho aqui e faço assim ó eu venho aqui ponho um dier vou vir aqui vou pôr aqui ó o filme aqui dentro do defer Beleza se você não passar nada pro dier o que ele tá fazendo Ele tá dizendo o browser dizer que ele tá em estado Ocioso só nesse momento ele vai carregar Os dados aqui o que é muito também ele não vai carregar tudo

junto com o browser então aqui eu vou colocar assim ó que antes de cada filme inclusive ó vamos melhorar Esse código aqui acho que esse categoria aqui vai ficar uma bosta vou remover ele daqui tá vai ficar somente assim ó e aí antes de cada filme eu vou ter a minha categoria aqui beleza então eu vou pô o h5 meu nesse lugar aqui ó que vai ser a categoria ó filme desse jeito aqui olha como que ficou testando for defer views filme Um n testando mais uma vez de fair aí a terror se eu dou

um f12 gente cadê o angler notem que eu tô aqui em cima na Hora que ele abriu ele apareceu os três filmes aqui já que foi aquele primeiro ng4 que a gente fez não eu acho que esses três filmes já é tudo né Ó lá filme Um de terror dois de terror três de terror eu vou dizer pro angler o seguinte você só vai carregar os filmes na hora que eu chegar na categoria aqui do for então ó eu vou jogar esse filme para fora e vou pôr on viewport on viewport e vou colocar aqui

Ó categoria fazendo tipo um Netflix agora ó o que que eu tô fazendo aqui vamos vamos explicar essa lógica aqui eu tô fazendo um for em todos os filmes em cada filme eu coloco no topo a categoria aí eu falo você só vai carregar os filmes daquela categoria na hora que a categoria aparecer na tela do usuário Aí sim ele carrega os filmes vamos testar Tá tô aqui em cima aqui agora ó tô aqui em cima olha o app root tá Vazio aí eu vou descendo ó testando o for testei ação é última Esse aqui

foi o teste que a gente fez e agora a gente vai vir testando defb views beleza carregando por quê Porque esse primeiro eh defb views é o que a gente tá utilizando com o Hover então vou passar o Rover em cima e ele carregou o filme ali do primeiro de fairb views ó n filme Um n top e a e agora ele tem aqui ó testando mais uma vez o deer agora ele vai fazer a lógica o seguinte Na hora que apareceu ação Ele carrega os filmes de ação ó filme Um de ação dois de

ação três de ação na hora que eu scrollar mais um pouquinho ó foco aqui embaixo também tá gente ó na hora que eu scrollar mais um pouquinho vai aparecer outro gênero e aí ele vai buscar os filmes do novo gênero ó terror aí ele buscou os filmes de terror voltou suspense aí ele buscou os filme de suspense Então mano a gente tá fazendo um lazy load a nível de componente cara É muito isso velho vamos pro próximo vai acho que já deu para entender isso aqui ele tá explicando aqui mais ou menos o que eu

expliquei tem outros recursos que dá para olhar aqui dá um pulo aqui nesse blog angular iio gente vale muito a pena dar uma vista e esse de ferly também tem algumas propriedades que é loading error aqui também então no tempo de loading no tempo de error ele tem como você passar algumas alguns Place holders também aqui Ele tá dizendo quais outras opções que a gente tem além de viport igual eu mostrei né o Rover igual eu mostrei o n igual eu mostrei então tem várias coisas que dá para fazer aqui What's next vamos ver o

que que ele vai falar aqui tá ah tá agora ele tá dizendo que o NG New ele suporta server Side rendering cara igual aquela pergunta que eu mostrei PR vocês lá no começo por causa disso gente eu vou vir aqui inclusive ó e vou dar um v voltar uma pasta e vou um NG New angular 17 ssr beleza Ou seja vou criar um projeto só e aí eu vou dizer para ele que eu quero sim ativar o ssr para mim mostrar para vocês isso aqui já vai vir tudo configurado cara muito louco isso aqui então

Whats next vamos descendo ele tá mostrando aqui o rendering não sei o quê Tá passando que se você passar o traço traço ssr você não precisa dar sim e não naquela pergunta tá bem suave hydration isso aqui é muito velho depois eu vou terminando isso aqui eu já Vou mostrar para vocês o como que a hydration funciona tá dizendo que agora tá muito mais simples de trabalhar tá com ss inclusive para fazer Deploy aqui no no no firebase aqui bem maneiro isso também Ah vamos lá New Life cycle hooks aqui eu confesso que eu não

dei uma entendida ainda sobre isso que agora apareceu dois que é o After render After next render eu meio que buguei ainda no ú no uso disso aqui mas ele vai ser chamado dessa Forma aqui como se fosse uma função e uma Arrow aqui dentro beleza eu ainda buguei eu não entendi ainda um caso que eu iria utilizar Nessa parte ele diz que eles estão saindo do do Web pack tá porque o webpack é que não não tá causando não tá dando um suporte tão igual o Vit e o es build tá dando então pros

novos projetos eles estão utilizando esses dois por isso aquele ganho de performance que que eu fui falei lá no começo de 87 que eles Disseram lá ó lá ó 67% a mais a mais não melhor né de tempo de performance de melhora então isso aqui foi muito legal para ssr e ss ssg que é server Side server não static server static Gener Eu acho você eh gera a página antes né do do do App no momento de compilação do app muito isso aqui também PR performance tá gente que tem algumas comparações agora no nosso Dev

Tool Gente esse carinha aqui ó a gente tem esse injector 3 aqui que é na onde a gente mostra as dependências ou seja como que o app tá sendo desenhado ó o app component tem um filme component e outro filme Olha que interessante isso aqui cara para fazer um debug disso aqui é muito da hora velho e aqui ele tem o o de ambiente mesmo né que seria as coisas básicas aí que faz o angular funcionar e agora aqui nível de elemento cara ó filme filme component app component se você tiver service também você consegue

então ficou Assim é uma paradinha que tá simples ainda mas eu acho que tem bastante potencial aqui em poder ajudar a gente tá então ele tá explicando aqui como que utiliza o o Dev toos Olha que interessante é que outra coisa eu tô com um zoom muito alto no navegador porque por causa da aula do YouTube mas olha o nível que chegou isso aqui que interessante cara pro angler pro desenvolvedor angler Olha tudo que a Google tá entregando por isso que a Galera tá falando que é um novo momento aqui e agora standalone api é

padrão tá bom gente Inclusive eu ter um vídeo para soltar de standalone apis cara que eu vou soltar logo depois que eu terminar esse vídeo aqui se vou soltar dois vídeos hoje lá e já era então explicando como que utiliza as novas estend Alone apis aí é muito simples também porém agora virou padrão no angler tá bom próximas etapas agora reatividade gente o angular tá tirando a a capacidade Agora de de utilizar o Zone DS Se você não tá ligado muito bem o Zone JS era uma biblioteca que o angler utilizava para identificar quando houve

uma alteração para que ele fizesse a renderização de novo no template porém usando GS ele não era tão inteligente tão performático igual o signos é então hoje a gente tá utilizando signos Beleza o Zando GS ele funcionava mais ou menos assim numa analogia para você ele tipo era assim ele tava funcionando aí ele eu Acho que aconteceu alguma alteração no componente aí ele checava toda a estrutura do seu app E aí ele verificava na onde tinha uma alteração E aí ele executava aquela alteração no template ou seja ele tinha essa questão do eu acho e

depois verificava com o sinos é diferente o sinos ele notifica o angler e fala ô mudou um negócio aqui e aí você não tem aquelas aqueles cheques de alterações escroto tá ligado você faz a toa o angler não faz mais isso então o Angler tende a seruit muito mais rápido trabalhando com o signo Beleza então vamos aprender signo aí novas etapas aqui agora de teste que eles estão falando aqui novas etapas material 3 também vamos ver o que que vem aí por aí qualidade de vida e agora a gente tem aqui também uma parada para

você colocar transition direto no componente não vou entrar muito nisso aqui não preconnect image de loading Animation mod de Loading é o que eu tava explicando aqui ficou muito mais fácil de de configurar as coisas aqui também cara esse input velho Transforms é uma parada que eu tava esperando faz um tempo do angular velho Deixa eu mostrar para vocês aqui ó eu tenho aqui meu filme component aqui agora beleza e aqui dentro do meu filme component vamos supor que eu tenho um um @ input aqui tá desse jeito aqui igual era antigamente que eu vou

colocar disabled beleza disabled igual a false Tá bom aí eu venho aqui e passo salvei leg dessa forma aqui aqui no meu App component eu vou até tirar esses blocos de F que a gente fez aqui ó vamos lá aqui também vou tirar Deixa eu ver se eu não quebrei nada quando eu fiz isso fechar aqui ah beleza então ele veio aqui até o testando de FAB views Deixa eu tirar certo aqui né gente então testando for então aqui Ó salvei só para sair o testando de FAB views cara olha só eu quero chamar aqui

o meu filme aqui agora ó eh H3 que eu tô utilizando H4 G3 testando input Transforms Cara isso aqui é uma parada que eu tava louco para chegar velho tava demorando inclusive aí eu tenho aqui o filme tá o o o nosso componente filme tá bom e dentro do componente filme Eu tenho categoria né e eu vou passar aqui Sei lá só ação só um tipo só e vou fechar dentro da própria tag tá porque agora o angular permite isso então aqui ó testando input Transform filme Um de ação dois de ação TRS de ação

deixa eu resolver uma parada aqui antes vou tirar esse for aqui vai ser só filme de e a categoria tá bom só para exemplo então ficou aqui embaixo Aqui o nosso filme de ação aqui embaixo aqui legal beleza então tando aqui esse filme de ação eu tenho o Disable true vamos supor que eu quero que quando for disabled ele fique cinza isso aqui inclusive que eu vou mostrar agora é até um novo recurso que chegou no angular agora antigamente Se você fosse escrever os seus Styles você tinha que colocar style eh Styles E aí dentro

do Style você vim aqui abrir um colchetes Eu odiava isso aqui Inclusive eu nunca utilizei isso e agora é no Style você não tem é no Style rls então Antigamente você tinha o Styles urls Você tinha que abrir o colchetes mesmo que na maioria assim raras vezes acho que nunca usei você ter mais de uma folha de estilo pro mesmo componente eu vou criar aqui uma folha de estilo para esse cara aqui então vou criar aqui ó criei e agora a gente ao invés de ter o Styles urls a gente tem só Style RL eu

acho que ficou muito melhor isso aqui tá aí ficou dessa forma aqui então eu vou dizer o seguinte que se o de o p tiver Disabled vou vir aqui e vou pôr uma Class pera aí Opa caguei o pau violento Class pon disabled que eu não vou entrar muito em conceito de então quando esse cara aqui tiver true ele vai adicionar a classe disabled aqui para mim beleza então eu vou aqui no estilo dele aqui agora eu vou dizer que quando tiver a classe disabled A cor vai ser sei lá não vai ser fff não

velho vou vir aqui vou colocar uma cor aqui um Cinzinha bem feia aqui tá bom salvar dessa forma Então olha só o filme de ação ele não tá disabled agora se eu venho aqui no app component e passo aqui então Ó disabled ó Antigamente eu não conseguia fazer isso né Igual a true igual tá aqui agora nem nem agora dá na verdade mas o que eu quero mostrar é isso aqui ó ó disable true ele ficou cinzinha aqui agora ou seja ele mostrou que tá desativado aqui né não dá para ver muito bem o cinzinha

vou deixar ele Um cinza mais fraco ainda então ficou aqui ó filme de ação disable true tá eh vou deixar vermelho se não vai né ó filme de ação tá disable true por isso que ele ficou vermelho só que agora a gente consegue fazer isso aqui ó ao invés de no input quando ele é boolean trabalhar dessa forma Olha isso aqui que interessante ó Transform hã transforme Cadê Como é que é o nome Mesmo deixa eu pesquisar aqui cadê cadê cadê ó lá o cara inclusive deu o mesmo exemplo de bullying aqui e agora ele

é utilizado dessa forma aqui ó cadê cadê ah lá bullan attribute então a gente chama como bullan attribute aqui e quando a gente utiliza desse jeito para mim passar que o disabled é true agora eu só preciso fazer isso aqui isso aqui cara ó inclusive ele vai Continuar vermelho ó mano Isso aqui é uma parada que eu esperava muito porque era um saco você tem que passar disabled igual a true E aí você tem que passar o disabled entre colchetes e tal achava um saco a parte da hora disso aqui gente é que você consegue

criar o seu próprio atributo aqui tá bom você consegue implementar o seu próprio atributo e dizer como que você vai transformar esse dado aí que chega dentro para esse dado aqui eu achei isso muito válido tá bom Achei bem da hora a ideia ã deixa eu ver se tem mais alguma coisa isso aqui eu já acabei de mostrar Style Styles URL ó antigamente era Styles Style RL e agora a gente tem Styles Cadê pera aí ah lá ó Style RL e o Styles aqui ele suporta uma string padrão achei legal isso aqui também ah introdução

do angler Tech acho que que é mais isso cara aqui ele dá uns agradecimentos da galera da comunidade que implementou umas paradas Aqui também junto com essa nova versão bem maneiro também e falando sobre o angler Dev cara é isso para falar a verdade eu acho que cobri quase tudo aí senão tudo aí do novo angler cara tô fiquei muito animado com essa versão nova do angler tem muita coisa da hora de FB views eu achei absurdamente é o @ ngif o @if agora o for eu achei interessante porque ele é muito mais performático do

que era antes essa questão dos inputs aqui eu achei da hora O o angler sair do zona de is e vim trabalhar agora só com sinos é interessante inclusive teve uma pergunta na hora que eu tava assistindo a Live lá dos caras de lançamento que eles falavam assim e se e agora que tá no sinos eu preciso ainda aprender a trabalhar com rxjs eu acho que a rxjs é uma das maiores problemas não problemas do angler Mas é uma das maiores Barreiras de de entrada que o angler tem para novos desenvolvedores aí então você Tirar

essa obrigação de aprender rxjs de cara igual a gente tá movendo agora pro sinos eu acho que é muito válido tá ligado só que rxjs ainda é válido para um monte de coisa imagina que você tá trabalhando com streaming de dados ali às vezes um websocket tá ligado esse tipo de coisa ainda assim é muito da hora você trabalhar com a rxjs só que eu vejo que o engler tá trabalhando numa ideia de deixar o rxjs uma parada muito mais opcional do que obrigatória igual é Hoje tá ligado hoje você entra no angler você tem

que saber muita coisa de angler você tem que saber o rxjs eu vejo que isso é um problema e o angler escutando a comunidade do jeito que tá tá ficando muito isso cara antes de terminar Inclusive eu até tava me esquecendo aqui né velho é vamos ver o o ssr aqui eu não vou nem eh abrir isso não vou ter que abrir para mim mostrar para vocês então isso aqui é o código com ssr tá vou mostrar para Vocês a pequena diferença que a gente tem hein Tá bom Ó esse aqui é o nosso código

com ssr o ssr ele tem umas paradas de server para configurar aqui ele já vem com a parada de hydration ol Olha o pack de ponto Jon nosso cara o angular moveu tudo para esse arquivo aqui ó angular ssr ó eu falando comigo na frente cara a meu Deus do céu vou cair aqui no canto ó falando aqui de ssr angular ssr agora é um novo pacote tá que a gente tá utilizando aí que o Angular utiliza vamos pôr no workspace aqui a fonte 18 aqui também então agora gente olha aqui ó veio tudo para

dentro desse @l ssr ele instalo Express né para fazer o server de node para ele então Antigamente você tinha angular Universal angular não sei o que angular um monte de coisa e agora você só tem esse ssr e para você rodar com ssr a mesma coisa que você tá rodando um app sem o ssr é só dar o npm start aí olha que que tranquilo que Ficou a configuração de isso aqui ó vou até tirar um pouco o zoom tá muito alto ah a gente tem aqui agora o server.ts que é a configuração do servidor

como que ele vai configurar dentro do app ó a gente tem agora o appconfig e o appconfig server então aqui ó provide server rendering já tá já tem um monte de coisa pré-configurada e aqui provide client hydration que é o processo de recuperar as páginas aí renderizadas do Servidor tá bom muito maneiro também to Use a different port yes vou dizer que eu não quero rodar na 4200 não e PR mostrar esse exemplo PR vocês aqui de como que funciona os dois casos eu vou voltar aqui no outro angler que a gente tá rodando Nossa

ele abriu num porta muito louca vou vir aqui no Git aqui ó e vou tirar todas as alterações que eu fiz ou seja vou remover tudo que eu já aprontei aqui removeu exclui arquivo exclui tudo então do jeito que o angular Vem é do Jeito que ele tá aqui agora inclusive ó angler 17 ó ele voltou PR aquela página inicial então a gente tá no isso aqui é o client Side Tá e agora eu vou abrir aqui ó o server Side rendering do angler que é esse cara aqui ah mesma coisa Cris não aconteceu nada

não o server Side funciona de uma forma um pouquinho diferente então a gente vai entrar aqui agora em em rede acho que rede dá certo de Mostrar vou abrir aqui deixa eu ver deixa eu ver deixa eu ver deixa eu ver Olha esse local host aqui ó o documento isso aqui é o documento que o angler busca quando abre a tela então eu vou mostrar nos dois casos isso aqui ó sem server Side e com server Side rendering Beleza então vamos lá de novo aqui vamos dar um F5 aqui vou aqui no local host e

olha só olha a diferença quando você tá trabalhando com angular normal a única coisa que ele coloca no bar é esse App Root por qu porque tudo é feito no cliente o browser é o responsável por ler os JavaScript e Mostrar toda essa tela todo o processo do angler pra gente quando a gente trabalha com server Side Hendry o angler na hora o navegador na hora de buscar os dados da página que a gente tá tentando acessar o angler processa tudo em servidor e retorna pra gente tudo pronto cara tudo pronto então Olha só o

ssr como que fica olha isso aqui olha aqui ó já começa a vir um Monte de coisa no Styles olha o tanto de coisa que apareceu que é básicamente aquele mesmo conteúdo que tá no nosso app component gente isso aqui pro angular é surdo de de rápido para seo isso aqui é excelente para você posicionar sua página no Google tanto que se eu venho aqui na documentação do Google eu chequei isso tá porque eu falei mano os Car fala de ssr Será que os cara usa se você vi aqui dá um console vamos vamos inspecionar

essa Parada aqui com vocês aqui vou mostrar isso aqui para vocês ó quando eu faço o scroll Zinho aqui para cima NG version NG server contact ssg que seria o ssg de static server Generation né então a página do angular obviamente ela é desenvolvida com angular né e também com esses novos recursos aí do angler aí inclusive tá na versão 17 já maneiro Demais Dá para confiar né pelo jeito né era o mínimo Que eu esperava mas gente para voltar aqui agora é isso que eu queria passar para vocês eu espero que vocês tenham gostado

que eu tenha cobrido tudo aí me deixa no comentários O que que você achou desses novos recursos do angler aí e até mais beleza e me siga nas redes sociais aí me ajuda com isso aqui me siga lá no Linkedin me siga no Instagram Me siga em tudo quanto é lugar e é nós valeu gente tamo junto se inscreva é nós