ANGULAR OBSERVABLES INICIANTES GUIA PRÁTICO

salve galera do YouTube Meu nome é Christian Will esse é o nosso canal de desenvolvimento Hoje a gente vai falar sobre angler beleza Hoje a gente vai falar sobre observables aí para você aí que começa a desenvolver em angler provavelmente aí você já viu esse nome aí e já bugou muito a cabeça sua pensando mano por que que a galera não fez com Promise e fez com observable tá é um padrão que a Google utilizou quando começou a desenvolver o angler Inclusive eu gosto muito desse padrão depois que você começa a sacar mais como funciona

acho que fica muito melhor de trabalhar inclusive ele tem algumas diferenças em relação às Promises ali tá porque ele é utilizado no lugar das Promises né então no angular a gente não tem muito costume de utilizar as Promise ali mas o conhecimento que você tem de Promise você consegue trazer aqui pro angular Beleza então ele é bem ele é bem avançado ali uma assim um exemplo bem simples para que você utilizaria observables ali Seria tipo quando você precisa escutar e reagir agir a alguma mudança né Você tem um código ali que precisa reagir a alguma

mudança tá Então imagina que você tem um componente ali sei lá pensando num conceito de e-commerce vamos supor que você tem ali o seu componente carrinho de compra Aonde esse carrinho de compra ele tem ali o bedzin ali contando quantos itens estão presentes ali dentro do seu carrinho de compra então quando o usuário clica em adicionar item ao carrinho o seu componente automaticamente ele já soma Um item ou seja ele re a mudança a uma variável uma mudança de estado que aconteceu dentro da sua aplicação então o seu carrinho de compra não fica toda hora

olhando para ver oh E aí adicionou um novo item adicionou o novo item não ele não funciona assim o seu carrinho de compra ele é notificado o seu componente carrinho de compra ele é notificado ô foi adicionado um novo item aqui e aí ele adiciona ou remove ali enfim o que ele tem que fazer então o observable ele é um tipo tá de de objeto no angular eh desenvolvido dentro do rxjs que é uma variável que já vem pronta né no angular aí e a gente vai falar um pouquinho deles hoje tá bom eh O

O observable ele é baseado no padrão observer tá bom ele é um design pattern aonde tem esse essa ideia principal que é você ser notificado quando alguma coisa é alterada beleza ó antes de seguir pro negócio Vocês já estão ligado eu vou pedir para dar aquela moral aqui me segue aí se inscreve aí tem gente t vendo que tem muita gente que tá assistindo o conteúdo tá gostando Tá apoiando e não tá inscrito aí dá aquela moral Ajuda nós e bora para cima Demorou então eu vou cair aqui pro meu canto eu preparei até então

uma aplicação angular que tá muito simples muito simplista tá então vamos olhar aqui para vocês ver como que ela tá ela tem só isso aqui ó uma Label adicionar um produto e aqui eu votei aqui um input tá esse input é ele tem um NG Model aqui então tudo tudo que eu escrever ou quando eu alterar essa variável input produto que tá aqui ó dentro da parte typescript do meu arquivo é ele vai tudo que eu escrever ele vai setar nessa variável tudo que eu alterar nessa variável ele vai setar aqui no meu input tá

bom é uma alterações aí de dois Lad aí que fala né o data bind e aí toda vez que eu dar um enter ó tô escrevendo dei um enter ele vai invocar a função adicionar produto que ainda não tá implementada tá bom esse adicionar produto aqui ele tem a parte aqui e depois que ele o produto ele limpa se eu limpo a variável ele vai limpar o input também tá bom então basicamente é isso e se eu quiser obter o valor do input é só obter o valor dessa variável aqui legal então vamos lá então

e antes de inicializar entrar no conceito de observable Eu quero explicar um conceito de Promise e depois que a gente resolver a promise a gente consegue dar um pulinho ali em observable Tá bom então vamos lá então e eu vou pôr aqui um um On init aqui no código por enquanto o que que é o on init Opa apertei um botão nada ver aqui o init seria o seguinte gente quando o componente ele é inicializado pela primeira vez esse App component é o primeiro componente que que o sistema abre quando ele é inicializado ele executa

o código que tá dentro do on init tá isso aqui é chamado de Hook tá bom não on init é chamado de Hook esses processos de ciclo de vida do componente ele é chamado de hul tá hul h o o k assim ó hul desse jeito e não Hulk do do Hulk Então vamos lá e eu vou gerar uma Promise aqui que eu vou vou vou ter a ideia o seguinte eu vou gerar um timer aqui então eu vou vou criar uma Promise que vai ser resolvida depois de um tempo a ideia da Promise é

essa Promise vem de promessa então eu quero que depois de 5 segundos ele emita uma mensagem para mim então eu vou vir aqui e vou gerar uma Promise tá que vai ser do tipo string e essa Promise ela tem duas saídas ela pode ser ou resolvida ou rejeitada então eu vou chamar aqui eu vou criar um método aqui chamado resolver tá bom caso ela tivesse alguma opção de ser rejeitada aqui não vai ter como ela dar erro né rejeitada é como D é quando dá erro aí você iria pôr mais um parêntese aqui e iria

chamar um rejeitar aqui isso aqui são funções tá gente isso aqui não é uma variável de valor é uma função que você invoca essa função e passa um parâmetro desse tipo aqui depois a gente já vai ver isso aqui logo em segid também então eu vou fazer o seguinte eu vou chamar esse set time out aqui do próprio JavaScript e vou falar aqui Depois de 5 segundos tá esse valor aqui ele tá em milisegundos então se eu ponho 5000 aqui seria 5 segundos aqui Depois de 5 segundos eu vou chamar o método resolver tá bom

e vou passar uma string aqui dentro essa string porque eu falei que essa Promise retorno uma string então eu vou falar que foi resolvido na a promise e antes dele ser ouvido vou até pôr um console P log aqui Promise iniciada Beleza então eu tenho aqui ó Promise Foi iniciada Depois de 5 segundos ela vai ser resolvida tá como que eu faço para me chamar uma Promise se você já deve estar ligado né dis pimer P Den O que que é o den quando eu chamo o den significa que eu tô dentro do código do

den é o que deu certo o que deu certo é o é a primeira função resolver então quando eu chamo o resolver eu não tô passando aqui esse valor em string Então dentro do Den O valor vai ser uma string Então esse velho que eu tenho aqui dentro do den quando eu paro o mouse é uma string porque isso aqui é uma Promise de string beleza tose Tá ainda velho mas vamos lá aqui dentro desse velho aqui o que eu vou ter é esse valor que foi emitido dentro da minha Promise aqui dentro do resolver

legal então eu vou dar um console pon log aqui e parecer e mostrar esse velho aqui pra gente ver o que vai acontecer salvei vou abrir aqui o o negócio e aí ó vou dar um F5 de novo Promise iniciado ou seja o componente inicializou ele já executou a promise Depois de 5 segundos a promise foi resolvida e a promise acabou mano na hora que você inicializou ela ela aconteceu alguma coisa ela pode estar fazendo uma função diferente do que simplesmente retornar aquilo ali ela pode estar fazendo uma comunicação com o backend que é que

ela é mais utilizada hoje né bater em alguma api depois de um tempo por que que se usa Promise porque ela é uma parada assíncrona né a gente executa só que a gente não sabe quando que vai ter o valor ali então ela meio que vai executando em segundo plano ali na hora que ela retorna O valor a gente tem ali dentro do demo perfeito então a promise ela é iniciada E aí na hora que ela é resolvida ela morre o observable ele não funciona desse jeito tá gente o observable ele é inicializado ele é

resolvido só que ele ele pode continuar sendo resolvido resolvido resolvido tá ligado é meio que assim que funciona ficou meio bugado um pouco na cabeça sua mas a promise ela seria um observable que emite um valor só então vamos supor no caso de por exemplo você tem ali o seu carrinho de compra e você precisa ficar escutando ali uma variável que vai ficar sendo alterada toda vez que ela alterada você vai escutar ali no seu componente Ô foi alterado foi alterado isso aí é uma Promise que não morre isso aí vai ser executado através de

observable mas exemplificando em Promise seria como se fosse uma Promise que não morre e ela fica toda hora alertando você ô chegou um novo valor chegou um novo valor Demorou mas que é assim que funciona vamos lá então vamos exemplificar Essa mesma conversa aqui dentro de um observable bora então aqui e eu vou pegar essa Promise aqui vou sumir com ela Private timer e vou P um dólar aqui o que que é o dólar Cris Para que que serve o dólar esse dólar que que eu adicionei aqui aqui na frente do timer ele nada mais

é que um caracter a mais no nome da variável ele é uma convenção que a gente da comunidade do angular utiliza para dizer que essa é uma variável do tipo observable então uma convenção não é uma obrigação só que é tipo a galera todo mundo utiliza dessa forma tá bom na hora que você bateer o olho nessa variável por causa do dólar no fim você já vai saber dólar cifrão sei lá você vai saber que isso aqui é uma é uma variável do tipo observable Tá bom então eu vou dar um New observable aqui mesma

coisa vou passar uma string Opa uma string e aqui dentro ó eu tenho um subscriber aqui ó que seria o o quem que vai emitir os valores desse observable então vamos lá vamos fazer um set time out aqui é de 5 segundos e aqui eu vou falar que o sub PN vai emitir o valor opa observable beleza e antes do time out um console P log iniciado sei lá um observable legal pon v e aqui ó na Promise a gente utiliza den não é isso no observable tudo em maiúsculo aqui timer a gente vai utilizar

o subscribe perfeito desse jeito aqui ó a gente utiliza o subscribe e aí o valor que a gente tem no subscribe é o mesmo valor que a gente teria aqui no caso da Promise Tá bom então o valor que eu emito aqui todos os valores emitidos pelo subscribe pelo observable ele vai cair aqui dentro dessa variável aqui do nosso subscribe Tá bom então vou dar um console pon log e vou pô o Vel aqui vírgula e vamos testar para ver como que vai ser ó lá ó iniciado observable Depois de 5 segundo o observable vai

eh ser resolvido resolvido o observable até não é um nome interessante chamar de Resolvido porque nesse caso isso aqui ainda tá vivo na memória o observable ele fica vivo na memória do computador essa inscrição que a gente fez subscribe em inglês é se inscreva né Então essa inscrição Ela ainda tá vivo na memória não é igual uma Promise que ela executa e morre o observa b não ele ainda fica vivo na memória tem algumas maneiras de tratar isso tem só que isso não é um defeito dele é uma característica porque em algumas situações ele deve

ficar vivo na memória em outras situações que é o caso às vezes de uma requisição http ele deve morrer logo em seguida se eu quiser que ele morra logo em seguida eu consigo matar ele também por exemplo eu posso vir aqui dentro do meu sub Opa e chamar o complete quando eu chamo complete pronto acabou o observable tá bom ele não vai emitir mais valores porém não é o objetivo nosso aqui ainda eu vou vir aqui vou comentar esse observable aqui e a gente vai entrar agora num conceito numa numa parte da aula aonde a

gente vai problematizar eh uma situação e aí ficaria o critério aí como que vai ser resolvido isso Beleza Ah cara como é uma aula gravada eu vou apagar tudo isso aqui senão vai ficar gigante isso aqui e aí seo vocês precisa copiar só ir pausando aí e mandando ver aí demorou Então vamos lá então Cris você falou que vai problematizar isso vamos lá eu quero eu quero criar um sistema um pouquinho mais robusto que essa Label input aqui tá bom Eu quero ter um um um carrinho aqui que vai ficar contando ali quantos itens eu

tenho Então vamos lá para fazer isso para isso funcionar legal eu vou [Música] eh eu vou criar aqui uma nova pasta que vai se chamar sei lá compras vou dar o nome de compras aqui nossa viajei né seria compras barra carrinho P component.on typescript Legal vamos criar um componente aqui então e Export op op explor Class carrinho component legal perfeito para ser um componente tem que adicionar o componente aqui em cima a gente vai precisar de um seletor porque a gente vai precisar chamar esse componente dentro de outro componente então app carrinho que vai ser

o nome eu vou falar que ele é standalone perfeito que é o novo conceito do ângulo arei e o template que vai ser o código HTML desse carrinho então aqui dentro do template eu vou dizer que a quantidade do carrinho e aí eu vou ter um outro spam aqui sei lá vai ser zero por enquanto tá bom E aí eu vou chamar esse carrinho component aqui dentro do meu App component então eu vou vir aqui antes dentro do Import do meu App component eu chamo meu carrinho component aqui e aí quando eu faço isso eu

posso vir aqui dentro do HTML dele e chamar o seletor dele que é o ep carrinho tá bom Por enquanto tá assim quantidade no carrinho tá zero ali faltou os dois pontos né para ficar bom por parece que eu dei os dois pontos ali e o bagulho Nem carregou de novo Será que eu tenho que barrar os dois pontos pro negócio aparecer ué Será que ele perdeu parece que ele parou de carregar essa parada aqui deixa eu dar um npm start de novo aqui tem de nadegas quantidade teste zero bugou o bagulho mas tá aí

ó quantidade do carrinho agora tá zero Cris O que que você precisa eu preciso que toda vez que eu adicionar um produto ele some esse carrinho aqui então a gente vai precisar de uma variável produto né para carrinho quer dizer para poder salvar esses produtos adicionados aí e aí esse cara que poder entender gente quando eu tenho uma comunicação entre dois componentes assim e tem duas maneiras de fazer isso né uma maneira é o componente a que seria o app. component comunicar com o componente carrinho aqui tá eu até poderia fazer isso só que pro

exercício aqui não seria um bom exemplo por quê porque no sistema real o carrinho ele fica mais ou menos aqui em cima aqui né geralmente é uma área que fica aqui em cima aqui fica o carrinho aqui em cima e aí tem todos os produtos então o nível do componente ali produto ali versus o nível do carrinho sei lá às vezes não é uma comunicação direta igual tá aqui o produto tá aqui e o carrinho tá aqui direto né Às vezes tem que passar por 10 componentes 15 sei lá dependendo do jeit que tá estruturado

o sistema então para resolver esse problema aí né de não ter que ficar mandando uma propriedade na outra eu vou deixar um pouquinho mais complexo isso aqui toda a comunicação vai ser feita através de service Tá bom então eu vou ter aqui o meu carrinho psice P typescript tá para ser uma service ele tem que ser injectable provided hot Export Class carrinho Service isso aqui vocês já estão cansados né de saber para quem não tá ligado o que que é uma service no angular basicamente é onde a gente centraliza as regras do sistema uma service

no angular ela tem a característica por padrão de ser singleton né O que que significa esse nome significa que qualquer componente toda vez que for pedir o angular vai dar o mesmo objeto então ele vai construir essa service uma vez e aí vamos supor eu vou ter a variável carrinho aqui dentro sei lá Private carrinho Por que Private porque só essa classe pode manipular esse objeto aqui antes disso deixa eu criar aqui como que vai ficar o carinho aqui do lado então eu ten aqui carinho na verdade eu vou criar com nome de compra eu

acho que vai ficar melhor então Export interface compra E aí eu tenho aqui o ID que é um Number né e o produto que eu tô comprando que vai ser uma string legal então o meu carrinho nada mais é do que um Array de compra né que vai ser inicializado vazio aqui perfeito então tando nessa situação que eu tô aqui agora eu vou criar um método aqui que vai se chamar adicionar produto aí eu peço aqui o nome do produto né que vai ser adicionado dis P carrinho ponto P né para adicionar o produto e

aí o produto ele tem duas características ele tem o produto mesmo que vai ser produto produto aqui e o ID que vai ser é a quantidade que tá no carrinho então disco. carrinho P lenf Mais Um item então o ID vai ser meio que um auto incremento aí que a gente tá usando tá bom e eu tenho esse adicionar produto aqui agora legal quando eu adiciono produto eu tô adicionando dentro do carrinho perfeito então já começou a ficar mais fácil a solução dentro do app. component o adicionar produto nosso aqui a gente vai ter que

chamar ou adicionar produto lá da nossa service quando a gente trabalha com service a gente vai vir aqui e colocar aqui então que vai ser carrinho service é igual a inject carrinho service legal aqui ó carrinho service tá aqui e agora dis P carrinho service ponto adicionar produto e qual que vai ser o produto dis P input produto Porque nessa variável input produto aqui ó eu eu tô capturando tudo o que tá sendo escrito aqui dentro desse input perfeito Então vamos lá então meio que tá funcionando a parada tá funcionando a parada ó tô toda

vez Então toda vez que vamos recapitular toda vez que eu dou um enter ele chama adicionar produto quando eu chamo adicionar produto eu tô indo dentro da minha service e tô adicionando um novo produto com o que eu escrevi ali dentro do campo quando eu adiciono um novo produto eu tô adicionando um novo item aqui dentro do meu Array aqui legal Como eu disse que um Array é uma service no angular ela pode ser ela entrega o mesmo objeto independente do Independente do componente que a gente esteja aqui dentro do carrinho se eu fazer assim

ó vou fazer com protected aqui ó não vou fazer com nada porque senão eu tenho que explicar isso para vocês eu não quero entrar em outro conceito aqui para bugar mais carrinho service é igual a inject carrinho Opa carrinho service legal ficou desse jeito então para mim pegar o valor que de itens que está dentro do meu carrinho você pode pensar o seguinte já sei aqui dentro do carrinho service eu vou criar um gather que vai ser Public vou nem Public nem precisa né carrinho quantidade return carrinho P Len ó então quando eu acessar esse

cara aqui eu vou ter a quantidade de itens no meu carrinho perfeito vamos ver se vai funcionar isso então a invés de ser zero aqui vai ser carrinho service ponto carrinho quantidade legal salvou aqui obti direto ali vamos testar teste tô adicionando não tá tá zero ainda ô louco Cris mas tá zero Então você tem certeza que ele tá adicionando alguma coisa dentro do carrinho vamos testar então vamos aqui toda vez que eu fazer um dis P carrinho P push eu vou fazer um console log do carrinho Beleza então lá teste dei um enter Será

que essa bosta deu pau de novo cara vai Clear npm start de novo não tem essa bugueira que tá dando aqui não velho por que que ele não tá vindo console log eu não tô chamando esse adicionar produto aqui carrinho service dentro do app. component adicionar produto só se pô mas se ele tá limpando é porque tá Tá certo bom vamos debugar essa aqui para m entender o que tá rolando carrinho ponto deixa eu ver se você deu um ô meu Deus acho que já deve ter dado um Será que deu loop ó ele leu

ali o que eu tô achando estranho é ele não tá printando no meu enter os produtos desse carrinho por que será Deixa eu fazer um teste aqui vou tirar esse cara ainda não filtrando alguma coisa se adicionar produto tá sendo chamado né Deixa eu ver se tá sendo chamado tá né ah agora ele imprimiu Por que que antes ele não tava imprimindo velho Por que angler ó lá agora ele foi ó teste Tá bom então se ele imprimiu beleza até é bom que Vocês pegaram uma sessão de debug aí então ele tá imprimindo e esse

quantidade aqui ó ah eu tirei né para ler esse cara aqui vou voltar ele ó agora ele tá funcionando ó Começou a funcionar ó virou um ali Olá toda vez que eu escrevo ó aí os dois itens aqui agora legal CR tá funcionando do jeito que você comentou só que gente olha quantas vezes tipo assim Olha quantas vezes ele tá lendo quantidade quantidade quantidade quantidade quantidade quantidade quantidade quantidade só para ele pegar o valor o que ele tá fazendo aqui é basicamente aquela condição que eu que eu exemplifiquei antes que ele tá toda hora ele

fica batendo dentro desse objeto aqui toda hora ele tá aqui ó dentro do toda hora ele tá batendo aqui dentro do nosso carrinho vendo Ô alterou o valor Aí não alterou o valor porque olha só eu vou limpar isso aqui de novo ó vou apertar a Ele leu duas vezes o objeto para ver se tinha alterado algum valor nele B duas cada vez que eu leio ele tá eh disparando duas vezes e e uma coisa não tem nada a ver com a outra tá ligado o que ele tá fazendo é que a cada interação minha

com o sistema o angular tá rodando o detector de mudança para ver se aconteceu alguma coisa dentro da daquela variável isso é porco ah mas a operação aqui é simples né Eu Tô Pegando só o Len de um Array perfeito até simples só que em algum num projeto real aqui dentro no carrinho quantidade Talvez seja um exemplo até simples né mas você não vai ter essas operações simples desse jeito aqui e outro tô chamando operação à toa aqui ó à toa para olha isso Olha isso tanto de vez que tá chamando sendo que nem alterou

esse cara tá ligado Então por que que eu preciso ler a quantidade de alguma coisa que nem alterou só que isso aqui fica oculto nas Entrelinhas né se eu tirar essa parada aqui e escrever ó lá ó parece que o sistema tá funcionando normal e até tá só que a gente não sabe o que tá acontecendo por baixo dos panos Beleza então o que eu quero resolver com isso é o seguinte eu quero que eu só leia a quantidade de itens do meu carrinho quando for adicionado o novo item no meu carrinho tá ligado basicamente

é isso que eu quero fazer então o que que eu vou fazer aqui que que Como como que eu vou trabalhar essa questão aqui vamos lá eu vou transformar esse carinha aqui ó ó para ficar bom eu vou transformar esse cara numa função do jeito que tá aqui agora tá bom eu acho que vai ficar vai fazer mais sentido ser uma função isso aqui é e vou dar o nome de retorna quantidade carrinho tá bom não mudou nada por enquanto falar que é uma função a única coisa que tá mudando é o jeito que eu

chamo ele aqui né não significou nada o que eu fiz só que eu vou criar um observable aqui dentro que vai ficar notificando eu toda vez que for adicionado um produto perfeito Então olha s o que D mim fazer aqui que legal isso eu V criar um observ aqui que vai se chamar produto adicionado como ele é um observable o Dozinho no final aqui para funcionar seguir As convenções Beleza se eu crio um observable do jeito que a gente criou anteriormente que é new observ noo eupr exic ficar emitindo valor nele então eu vou criar

um observable do tipo por exemplo e subject igual New Opa New subject Qual que é a diferença do subject pro observable normal o subject ele é um observable tá ligado ele vai criar um observo por trás do span só que eu tenho mais controle sobre ele por exemplo eu posso emitir valores nele enquanto o observer botar vivo ali e eu também posso e criar um observer do tipo behavior subject que seria um obser onde eu inicializo o valor dele beleza não tenho a eh a necessidade de inicializar um valor então um subject de compra perfeito

vai ser isso aqui T piseira agora no adicionar produtos o que que eu vou fazer eu vou ter aqui o meu produto tá que vai ser do tipo compra que vai ter essa lógica aqui e aí aqui eu vou adicionar produto Opa produto compra não pode ser o mesmo nome né CR produto compra Beleza então até agora o que eu fiz foi Criei um observable do tipo produto adicionado tá bom E aí depois toda vez que eu adicionar um produto ó eu adicionei ele no meu carrinho eu vou lá no meu observable produto adicionado pnex

quando eu falo next eu tô falando o seguinte ó eu quero emitir um valor aqui então eu vou emitir o produto compra beleza quer saber mano se eu emitir esse valor acho que não vai ficar tão interessante eu vou criar um observable do tipo int aqui do tipo Number porque aí eu vou emitir a quantidade de produto tá então vai ser eh dis pon carrinho P Len para ficar melhor o exemplo legal então tá aí ó toda vez que é adicionado um produto esse observable aqui ele tá emitindo um valor legal E aí o que

que eu preciso fazer eu posso vir aqui ó por exemplo e deixar esse cara Public aonde outros né outros componentes vão poder acessar esse cara qual que é o problema de eu fazer Isso significa que muita gente vai ter controle sobre esse cara aqui e aí não é tão interessante mas vai funcionar olha só o que eu vou fazer aqui ó eu vou colocar aqui ó Car carrinho e carrinho service que é o normal E aí eu vou colocar aqui ó e quantidade carrinho dólar é igual a carrinho service ponto não produto adicionado ficou desse

jeito aqui ó porque ele é público né então eu só tô pegando o valor dele agora por exemplo ó duas coisas que eu posso fazer aqui vou começar pelo simples primeiro tá eu posso ter uma uma variável aqui com o nome de eh quantidade de produtos tá bom que vai inicializar com zero e aí dentro do Construtor meu aqui ó dis ponto quantidade de carrinho ponto subscribe ou seja toda hora que esse quantidade de carrinho emiti um valor que seria a quantidade eu vou vir falar Opa dis ponto quantidade produtos é igual a quantidade só

perfeito o que que eu tô fazendo então toda hora que o meu carrinho service aqui ele emitiu um valor esse produto adicionado foi emitido Quando que o produto adicionado é emitido quando eu adiciono um produto aí através do Next aqui eu tô emitindo Qual que é o novo valor do meu carrinho Beleza quando eu pego esse novo valor do meu eu tô achando que eu nem vou precisar desse método aqui todo mundo que tá inscrito no produto adicionado vai receber essa informação aqui ó o novo carrinho pon lenf então quando eu adiciono o valor aqui

o subscribe aqui dentro do quantidade tá o valor atual se eu adicionar mais um ele vai aparecer mais um novo valor aqui e aí eu seto nessa variável quantidade de produtos agora eu venho aqui e coloco a quantidade de produtos aqui dentro aqui ó ficar assim Legal vamos ver se isso aqui vai funcionar teste dei enter ali ó 1 2 3 4 5 então ele meio que funcionou do mesmo jeito como que eu sei que tá funcionando daqui eu vou transformar esse cara aqui ó em mais de uma linha e vou dar um console pon

log valor emitido logo é boa valor emitido vai ser o quantidade aqui legal ponto e vírgula ó valor emitido 1 2 tá vendo que o obser b tá emitindo o valor agora a situação é diferente eu não fico toda hora olhando para ver se aconteceu alguma aqui dentro desse desse nosso Array não eu não fico to hora olhando eu sou notificado que aconteceu alguma alteração ali dentro legal só que tem um porém gente uma coisa que dá para melhorar aqui é o seguinte ó o nosso produto adicionado ele é do tipo subject a gente deixou

ele público então o carrinho por exemplo se ele quiser ele vem faz assim ó pto cadê cadê lá quantidade carrinho ponto next sei lá eh 50 quando esse componente foi Opa quando esse componente for inicializado o que que ele vai fazer ele vai meter um 50 aqui ó já inicializou com 50 só que não tem 50 dentro do meu eh dentro do meu observable lá dentro do meu carrinho o que eu quero dizer com isso é a responsabilidade de gerenciar esse observable tem que ficar na onde tem que ficar na service então o que que

eu vou fazer Eu transformo ele em privado e aí eu coloco aqui ó obter quantidade carrinho legal E aí eu retorno aqui o produto adicionado que é o nome do nosso observable ponto as observable desse jeito aqui Cris mas já não é um observable só que ele é um observable mais potente né Ele é um observable do tipo subject aqui que é o observable que eu consigo ficar emitindo valor igual eu fiz agora para mostrando para vocês quando eu falo que ele é do tipo observable Olha a diferença ó vou salvar e agora o carrinho

ele não consegue acessar o produto adicionado ele tem que ele tem que pegar o obter quantidade de carrinho legal isso aqui funciona do mesmo jeito só que agora eu não consigo mais executar o Next ou seja quem gerencia o meu observable é só a minha service Beleza então isso aqui é interessante esse retorno a quantidade de carrinho não precisa mais vou salvar aqui e vamos ver se tá funcionando tá funcionando ó lá ó tá funcionando numa boa e tá mais esperto agora só que tem um porém gente o observable quer dizer do jeito que tá

aqui já já aprendeu coisa para né só que o observable gente ele é um pouco além ainda disso tá ligado Tipo assim ele tem um problema não é um problema ele tem uma questão que é o vazamento de memória para ele funcionar isso aqui ó ele fica na memória esse código aqui fica executando na memória Então eu tenho que falar para para ele que ele tem que parar de executar esse código num certo tempo ou seja eu não quero ficar eu quero escutar o quantidade de carrinho enquanto o meu componente estiver vivo Se eu matar

esse carrinho component aqui no meio do processo você vai ver a merda que vai dar ó eu vou criar um novo botão aqui ó que vai ser mostrar esconder contador perfeito ficou assim ó mostrar esconder contador vamos dar uma recapitulada do jeito que tá aqui agora ó eu escrevo falo que o produto aqui é um carro dou enter valor emitido um legal então toda vez que ele recebe eh alguma informação aqui ele aparece valor emitido um legal agora eu vou programar esse mostrar esconder para ficar trocando ele vai ficar mostra quando eu clico se ele

tiver mostrando ele esconde o componente se ele não tiver mostrando ele ele vai mostrar então eu vou criar uma variável de controle aqui super simples aqui dentro do meu app. component que vai ser sei lá mostrar esconder contador true quer dizer mostrar contador legal vai ser a matru Então ela é vai ser a Mat tru é boa ela vem inicializada com esse valor de True aqui e aqui ó dentro dessa div aqui ó eu vou ter um if tá bom mostrar contador tá bom E aí esse carinha aqui vai para dentro legal E aí no

Clique desse botão eu falo que o mostrar contador é igual a mostrar contador barrado né quando eu faço isso se ele é falso ele vira true se ele é true ele vira falso é basicamente isso que eu tô fazendo então caminho normal ele veio mostrou o contador para mim se eu falar que eu vou criar um produto que é carro eu dou um enter valor emitido um aqui ou seja eu tenho uma inscrição funcionando deu certinho agora eu vou vir aqui e vou adicionar um novo produto sei lá adar banana dois e os dois produtos

aqui dentro carro e bana foi o que eu adicionei né vou limpar isso aqui agora e vou esconder o carrinho ponto eu escondi o carrinho então se eu escondi o contador Teoricamente ele não tem que ficar mostrando para mim o valor emitido aqui embaixo Então vamos adicionar um novo produto aqui que vai ser uma maçã ah lá ó valor emitido três Cris Como que o valor emitido três tá aparecendo sendo que o carrinho component foi destruído velho ó o o nosso carrinho component não existe ele foi destruído o que acontece gente é que esse cara

aqui ele fica na memória ele tá vivo na memória essa inscrição aqui o componente foi destruído tanto foi destruído eu vou te provar Vou te provar ó on Destroy aqui então esse on destrói ele é um hul que ele é executado quando o componente é destruído perfeito Então a gente vai vir aqui vai colocar vamos lá de novo Opa console pon log carrinho destruído ponto e vírgula e salvei ó lá ó voltou aqui de novo então vamos lá teste carro banana Beleza então tá aí eu vou agora limpar esse cara aqui carrinho destruído então destruiu

o componente carrinho teste 2 valor emitido 4 ou seja esse código aqui ó ele tá na memória o que acontece é que se agora eu gerar eu mostrar o componente de novo ó ele entrou com zero né naturalmente ele iria começar com zero o que acontece é o seguinte gente nossa eu tinha que entrar em outro conceito para explicar porque que ele voltou zero e não voltou mas não tem importância vai na hora que a gente adicionar um valor aqui ele vai resolver para você entender esse outro conceito que eu tô falando Tem um vídeo

no canal chamado angular code versus Hot observables Tá eu vou deixar ele aqui nos comentários fixado aqui é um vídeo nossa importantíssimo sobre observable também vale a pena então agora eu vou escrever aqui um novo é um novo produto vou escrever produto aqui dou enter notem que agora apareceu o valor emitido e um doizinho aqui do lado significa que ele deu dois console log de valor emitido só que a gente tem um console log só ou seja tem duas inscrições na memória Qual que é o problema que isso pode gerar imagina que toda vez que

eu adiciono Um item no meu carrinho eu fui lá e adicionei Um item no meu carrinho Você foi lá no seu backend Salvar esse item que você adicionou no carrinho do cliente tá ligado Então você tem um banco de dados de memória lá temporário Você foi lá no no backend e salvou esse cara mano você ia fazer duas requisição aqui podia até quebrar o back esse carinha já foi salvo hein mano vamos somar a quantidade dele aí o cliente foi lá escolheu Um item você foi lá e salvou duplicado por quê Porque ele tá executando

esse código duas vezes a primeira vez foi a primeira vez que nós abriu criou esse componente ele gerou uma inscrição toda vez que ele gera uma inscrição ele fica escutando e executa esse código a cada vez que é alterado ali o o carrinho né Depois que a gente fechou e criou o componente de novo ele gerou uma nova inscrição em cima então tem duas inscrições viva tanto que se eu vim aqui agora ó eu vou mostrar ó destrui o carrinho mostrei de novo Opa agora três ou seja esse código aqui tá sendo executado três vezes

ó só que para um lançamento de evento só para resolver isso gente tem algumas maneiras de resolver isso tá vamos lá a maneira mais simples mais utilizada não é a mais utilizada hoje eu imagino né É você falar o seguinte Olha eu vou pegar o valor dessa inscrição aqui porque o subscribe ele gera um um objeto do tipo subscription igual tá aqui embaixo então por exemplo aqui ó e con que con V vou falar que eu tenho um sub aqui que é igual a new subs subscription desse jeito aqui tá então eu tenho esse sub

aqui ó eu vou obter o valor que é gerado dessa subscription então conste aqui ó [Música] Sub contador legal E aí eu venho aqui ó dis PS pad e adiciono subcontador dentro ali ó tá bom desse jeito então aqui ó eu tô salvando todas as inscrições dentro desse objeto aqui e aí na hora que o meu componente for destruído dis PS unsubscribe legal desse jeito aqui salvei e vamos testar agora teste beleza ô aqui ó produto test id1 legal agora eu vou adicionar um novo sei lá banana de novo dois banana dois certinho que que

acontece vou limpar aqui vou esconder carrinho destruído então se eu mandar alguma coisa ó ele imprimiu isso aqui porque essa impressão é ela não é feita no componente carrinho essa inscrição aqui ela é feita aqui dentro do carrinho service então toda vez que chama adicionar produto olha aqui ó o log que apareceu pra gente só que ele não apareceu aquela mensagem Qual a mensagem do nosso carrinho component ele não apareceu o valor emitido porque ele parou de escutar aquele observable ele parou de escutar essa variável Porém na hora que ele nasce de novo ele tá

nascendo zero vou vou resolver isso daqui a pouco com vocês aí não tem problema nem que o vídeo fica longo já tá né então vou vir aqui e vou adicionar um novo produto quando eu adiciono um novo produto valor emitido quatro que é a quantidade de itens que tá dentro do meu Array ali só que ele emitiu um valor só ou seja ele apagou a inscrição e criou uma nova essa aqui é a maneira correta de trabalhar Beleza você tem que desinscrever do objeto tem n maneiras de se desinscrever do objeto tá bom gente é

é uma delas é essa forma aqui que eu coloquei que é uma das formas mais simples aí e eu vou est mantendo ela aqui pra facilitar a ideia da aula tá bom vamos corrigir um um segundo problema aqui agora tá bom qual que é o segundo problema Cris vamos lá se eu sumo com o negócio quando ele mostra de novo eu crio eu tô criando uma nova inscrição aqui só que eu não tô obtendo Qual que é o último valor que foi emitido desse carinha aqui ó e essa também é a diferença ah entre o

subject e o behavior subject tá isso tudo gente vocês vão estudar melhor lá nesse vídeo que eu falei PR você do hot versus code observable Tá bom então eu vou dizer o seguinte aqui ó o behavior subject eu sou obrigado a passar um valor inicial que é zero Só que todo mundo que se inscreve nele Vai pegar qual que foi o último último valor que foi emitido por ele então quando eu troco isso aqui ele automaticamente tende a resolver aquele problema vamos testar Então vamos lá produto vou dar um enter produto um maçã maca Beleza

agora Eu escondo carrinho destruído legal V mostrar de novo e aí ele já nasce com dois porque dois foi o último valor emitido pelo observable legal então agora a gente já avançou bastante a gente já tá falando até de liak de memória você já tá entendendo bastante o conceito de observable para que que serve um observable serve para isso para que você escute uma variável aí é toda vez que acontece uma alteração nela você seja notificado como que faz para melhorar isso aqui Nosa dá para melhorar isso ainda vamos melhorar isso aqui mano o angular

tem um um os pipes né que são modificadores de valores aqui tá bom e o angular você não precisa nesse caso aqui ó eu preciso do valor da quantidade mas eu não tô fazendo nada com esse valor eu tô setando dentro dessa variável tudo bem legal tô fazendo isso mas eu não tô modificando o valor não tô fazendo nada demais com ele então ao invés de você ter toda essa estrutura aqui igual a gente tem ó ó comentar esse cara aqui comentar esse carinha aqui ó então ao invz da gente ter toda essa estrutura que

a gente tem eu não preciso inclusive nem desse quantidade de produtos Tá bom eu posso vir aqui e falar pro angular o seguinte ó angular você vai ser o responsável por se inscrever no componente ou seja isso aqui se inscrever nesse observ aqui que a gente criou você vai ser o responsável por se inscrever e também o responsável por destruir ou seja por se desinscrever desse cara quando ele morrer para fazer isso eu posso vir aqui imports é chamado de async Pipe legal e aqui dentro do a Pipe eu pego aqui o observable quantidade de

carrinho dólar Pipe a vai ficar dessa maneira aqui o bagulho mano P O que que o p vai fazer ele vai pegar o valor emitido por esse observable tá que era essa quantidade aqui que a gente seta dentro de quantidade de produto vai pegar esse valor quantidade aqui vai mostrar aqui pra gente na hora que o componente for destruído ele para de escutar perfeito Vou salvar aqui vamos ver se vai funcionar tá zero teste tá um já funcionou beleza Cristian Nossa Cristian produto ficou feio né velho carro tô escrevendo tudo errado mas maçã Beleza eu

vou esconder o compador agora e mostrar o contador de novo tá aí tá funcionando do mesmo jeito do mesmo jeito velho eu entrei em outro aí vamos lá de novo carro t Eu escondo e agora eu mostro de novo tá lá os dois Tá tudo funcionando sem li de memória sem vazamento então todo aquele código virou isso aqui ó Inclusive a gente não precisa nem de Construtor mais né Então vamos apagar o Construtor e o ng1 Destroy que a gente tá utilizando só para isso a gente pode apagar também e aí e aí a gente

não tem nem esse sub aqui e ficou só isso aqui chora velho ficou bom demais tá vendo o que que é a ideia do obser isso cara então é essa questão coisas que você precisa lembrar aqui eu tô utilizando o Pipe em alguns casos você não consegue vamos supor que você tem uma chamada para uma API você vai ter que utilizar o subscribe ali porque as chamadas para api elas Retornam ali e vamos supor ó vou fazer um um exemplo não não vou fazer não porque o vídeo tá muito grande mas você tem uma chamada

para uma API Às vezes você precisa modificar esse valor que vem da api E aí às vezes é necessário fazer um subscribe ali Toda vez que você fazer o subscribe você não pode esquecer deixa eu dar os control Z da vida aqui ah antes do você não pode esquecer de fazer a lógica de obter a inscrição e desinscrever depois tá então para você que vai utilizar o observable aí com P com e com chamadas http que é o padrão do angular eu tenho uma dica extra para você você pode por exemplo em chamadas http que

que ela acontece ela emite um valor e depois ela não vai emitir mais nada ela não é igual esse obser aqui que fica emitindo o valor você pode utilizar os operadores do rxjs então saca só como que funciona você vem aqui dá um ponto Pipe esse ponto Pipe ele é executado no observable esse Pipe é de pipeline ou seja tem vários operadores rxjs que modificam que vai modificando os valores que são emitidos aqui pelo observable tá então eu tenho um operador por exemplo que chama take E aí eu passo qual que é o valor desse

take o que que o take tá fazendo aqui Tá para você ter uma noção ele vai pegar quando esse cara emitir um valor que é o valor que tá aqui ele automaticamente vai se desinscrever tanto que eu vou salvar aqui agora ó ele já emitiu um valor né Tá valor emitido zero aqui se eu escrever teste não vai funcionar ele vai continuar zero ali por quê Porque ele já se desinscreveu tá bom o take one faz isso então pras chamadas HT TP você pode trabalhar com esse take one por exemplo tá bom um segredo que

eu posso contar para vocês é que as chamadas http do angler elas automaticamente se completam após receber uma resposta então meio que você nem precisa desse take one só que por segurança a gente costuma fazer isso como boa prática vamos dizer assim você pode passar esse Pipe take one aqui paraas suas chamadas http E aí você não precisa ficar se preocupando em desinscrever porque ele vai o primeiro valor que o obser emitir que é o que tá acontecendo aqui ó valor emitido zero ele depois vai parar de escutar aquele observable e não vai gerar esse

problema de memória que Eu mencionei só que para observables que tem uma vida mais longa que foi o caso do nosso contador aí você tem que ter essa gestão aqui que a gente trabalhou hoje que a gente aprendeu junos beleza eu acho que para observable assim para iniciante mano faz muito sentido tudo que foi passado aqui eu acho que é um conteúdo bem rico inclusive ó deixa eu indicar para vocês os bagulho aqui é interessante vocês dá uma olhada mais o vídeo de observable que eu quero ver olha isso aqui ó swit map exhaust eu

tô na frente né velho swit map exhaust map tem a ver com o observable também a rxjs válido assistir isso aqui e essa aqui já é uma aula um pouquinho mais avançada de angular que é Hot versus code observable isso aqui vale muito a pena dar uma olhada também depois que você assistir esse primeiro conteúdo aqui beleza então a aula já tá ficando 50 minutos tá virando uma aulão chega né mano chega senão vocês vão cansar de mim já então queria agradecer vocês aí por ter ficado todo esse tempo com a aula aí Eh por

favor não esqueça aí de me seguir nas redes sociais aí e tal espero que vocês tenham aprendido deixa as dúvidas nos comentários aí tá bom esse assunto de obser é um assunto muito pesado em relação a angler é interessante que vocês entendam E domínio aí E o que mais da hora da aula né deu pau no meio aí a gente olhou junto estudou junto e aprendeu junto aí tá mostrando mal vez que eu não sou mágico tá bom gente eu erro também então vamos que vamos É nós até a próxima valeu gente tamo junto