salve galera do YouTube Hoje a gente vai trocar uma ideia sobre anguler aqui no canal Beleza a gente vai falar sobre Simons Foi um tema que uma escrita aqui do canal pediu queria já agradecer gente irmão aí é a Iandra Alves o nome é toda vez que você estiver gente alguma sugestão de tema de algum vídeo alguma coisa que vocês querem aprender comigo com a didática que eu dou do jeito que eu falo meio descontraído às vezes até deixa nos comentários aí beleza outro recado que eu queria é pedir para que se você não tiver inscrito ainda no canal se inscreve deixa o Sininho aí também ativado e também me siga nas redes sociais principalmente o Linkedin é eu acho que é aonde mais produz conteúdo também reposta os conteúdos no Instagram mas é difícil mas motivada mexendo no Linkedin todo dia pra falar a verdade do que no Instagram Beleza a gente hoje vai falar sobre Simon que é algo que tá pesando bastante a cabeça dos devendo aí porque tá todo mundo falando disso porque sai não é um recurso novo que chegou no angle chegou no angler 16 aqui agora que realmente vai entrar no lugar do zodíase que era a não sei se é ainda era eu não sei se já tá definido aqui não é enfim é ali que o angler usa ou usava para fazer a detecção de alteração nadom beleza porém o Zone GS não é tão eficaz assim quanto o sai no Beleza inclusive o saiba vai substituir algumas coisas que a gente tá utilizando ou RX JS tá joia então algumas coisas que a gente costuma trabalhar com observamos a gente vai trabalhar com sino Eu imagino que no futuro próximo Aí a gente vai estar bem mais adaptado a trabalhar com o saido usando recursos nativos do Igor né eu saio não é nativo do Ender agora aí isso vai estar dizendo que aí você já tá esse tipo já era tipo saco não saber um não tira sua responsabilidade de aprender o outro tá bom inclusive Aí cjs tem bastante recursos Hips ali que ajuda muito na parte de formulares e esse tipo de coisa e eu imagino que isso vai se mantendo um bom tempo ainda eu não sei se eles vão querer mudar tudo para sai não mas enfim a minha perspectiva é essa então se você tá chegando agora no eggler senta aí pega seu balde de pipoca ou também pega seu notebook e vem acompanhar comigo esse tutorial de saia beleza antes de começar a gente atualiza-se a Live vai estar rodando na versão 16 Tá bom deixa eu ver aqui se vai garantir vou cair aqui pro lado direito aqui para garantir Olha só 16. 2. 0 ok Acabei de gerar o projeto aqui apresentando o projeto ele tem um botão de executar aqui E esse executar executa essa função Inclusive eu vou apagar as coisas que tava aqui que era da aula que eu tava vendo aqui fazendo uns testes beleza e tá aí ó nosso componente vazio e o nosso é tem um executar aqui deixa eu executar de novo vazio tá bom Beleza então o nosso web com ponte assim ele vai ser um standalone componente beleza Vocês podem notar que eu tô importando aqui também tem esse One push Dash Company a gente vai fazer alguns testes quando utilizam strelli de One push se você não sabe o que que é isso aconselho você ficar na aula aí mano vou falar um pouquinho sobre isso e a gente vai entender como que se comporta de forma diferente quando a gente utiliza sai e quando a gente utiliza é uma variável normal aqui ok a gente vai ter uma série você também para trocar uma ideia um pouco sobre abordagens que a gente tinha quando trabalhava com observa como que vai ficar agora não sai não vai dar nada pra ser sincero vai dar pouca coisa vamos lá primeira coisa como que eu faço para mim desenvolver um sai não é fácil então eu vou gerar aqui uma variável eu gosto de gerar sempre com tipo protected porque quando ela vai ser usada na mão para que ela não seja acessível de fora do meu componente Quando é utilizado no charge Então olha isso é igual a sino Ok Isso não posso dar nome sai no Beleza Ele é igual a sino esse sai não ele já vem do arroba aqui em cima olha isso Beleza e aí você vai passar aqui dentro Qual que é o valor inicial dele eu vou passar o nome de Cris aqui e tamo junto é nós simples dessa forma já criando o nosso primeiro Cyber aqui ok como que eu faço para mim ler se sai aqui em cima então eu vou comparar aqui só para exemplificar eu vou colocar nosso sai Não beleza e o nosso sai não é o nosso exemplo sim você vai nele como se fosse uma função e aí começa já os problemas e a dor de cabeça e a gritar ali e todo mundo se perguntando deixa eu entrar aqui ó ó nosso sai do Cris deu certo tá funcionando gente Antigamente eu sei que a galera fala mano não pode ler funções na templa e tá certo ainda não pode daqui a pouco a gente vai dar uma comparada como que é uma função se comporta E como que um sai não se comporta basicamente O Igor não sabe quando o valor de uma função foi alterado então lembra Fica lendo e executando aquela função muito mais vezes do que necessário e isso pode causar inclusive problemas de performance então se você chama função no seu template n- mano para velho para com isso não é legal agora uma dica que eu dou não é uma dica que eu dou às vezes se você precisar ficar olhando um valor seta isso com uma variável da classe vai ficar melhor para ele detectar isso Outra coisa quando eu utilizo o êmbole ele é notificado quando acontece uma alteração no site por isso ele executa a função número de vezes que o seu sai não foi alterado Então tá aí a diferença costuma ser muito melhor E aí eu já começo mostrando porque que eu sai não veio para entrar no lugar dos onde é essa porque ela é mais ele é mais parrudo ele é mais inteligente beleza vamos lá vamos aprender um pouquinho mais aqui ó vou gerar esse Na verdade eu tô aqui esse botão de executar aqui ó e dentro do Executar a gente vai aprender três formas de alterar o valor de um sarna e vai entender o porquê que existe três formas beleza A primeira é a mais simples então eu vou vir aqui ó 10 pontos exemplo sai no ponto sete eu vou sentar um valor novo tanto que ele tá pedindo o valor do tipo string porque eu inicializei meu sino com o valor do tipo streaming se eu inicializasse meu sino com o valor do tipo Number A função 7 E aí exigir aqui um Number E se fosse um valor tipo bullying exigir um bule Beleza então vamos lá antes de Cristo eu vou mudar pra Christian de Chris para Christian top Vamos que vamos ó executar quando eu salvo aqui ó eu tô olhando ó vou clicar mudou pra crícia Cris você falou que tem três por que que tem três já não deu certo Deu certo porém gente a gente tem funções mais inteligentes aqui ó o sete ele define o sino para um novo valor foco nesse novo valor Aqui ó Novo valor absoluto vou colocar esse nome aqui ó Ok essa é a função do Set além do sete a gente vai ter também o update o que que o update faz ele vai definir o sim Com base no valor atual então quando eu utilizo update eu tenho o valor atual para mim eu mexer nele legal vou dar um exemplo aqui para vocês aqui ao invés disso aqui ser do tipo inteiro do tipo stream eu vou colocar aqui ele vai ser do tipo 1 e o nosso exemplo sai não aqui eu vou colocar exemplo count beleza e aqui também exemplo caute legal e agora eu vou sentar ele para 10 ó vai funcionar do mesmo jeito só mudar os nomes né executar as vezes os exemplos eu tiro bem na hora por isso que eu tô mudando os nomes aqui porque você quer que vai ficar melhor ó quando eu mudo para 10 funcionou numa boa só que não tem como eu utilizar o sete e ficar descobrindo Qual que é o valor atual do site Ah você pode ver aqui dentro vai ficar ele é ridículo o código né exemplo caute aí eu leia ele mas um não eu tenho um update aqui que ele já me traz o valor atual então exemplo caute ponto update E aí não update eu tenho que passar uma função que retorno Number agora porque eu não inicializei ele com Number significa que a função que tem que retornar um Number e agora depois eu vou mostrar já Qual que é o problema disso vamos lá acompanha aqui comigo Então esse é o valor atual ele vem ali na onde eu pus atual eu vou retornar o atual mais uma Ok então salvei e olha só esse cara aqui que aí faz sentido né Vamos lá ó cada cliente que eu tô dando ele tá executando esse nosso novo site Beleza então atualizando o valor para mais um Qual que é a diferença do update para o que eu vou mostrar aqui agora cara agora eu tenho também um caso que é o mutante não acho que é melhor que tem mostrar para vocês um pouco do update antes o update gente ele tem uma função como parâmetro que ele Exige uma função que retorne o mesmo tipo que você inicializou seu sino Então você vai deixar como string ele ia pedir que essa função aqui a atual mais um ela retornasse uma string vamos lá vamos dar um exemplo aqui bem Tosco ó quando eu mudo para Christian que ele vai dar erro aqui embaixo Aqui ó na verdade não deu né ele achou ele vai Ah porque eu já me inscrito aceita Essas loucuras aqui né mano mas então vamos lá ó eu vou vir aqui dólar atual update Beleza vou salvar Christian Cristiane funcionando na boca porém qualquer questão do update gente se eu tiver um objeto complexo vamos lá vamos testar com o objeto complexo nome dois pontos Christian beleza e a minha idade que é 20 aninhos né se dá para ver na cara aqui que é 20 anos legal o update já deu erro porque o update ele existe que eu retorno em um objeto inteiro de novo sentar eu não tô alterando só eu tenho que alterar olha só tá fazendo vou tentar alterar a parte ó eu vou falar que o meu atual ponto idade é igual a 30 deu erro porque o update ele exige ó vou abrir uma função aqui para ficar mais fácil a gente não se perder assim tá vou dar um retorno E aí aqui eu vou por aqui ó o nome eu vou usar o meu atual.
9 e o idade eu vou por selar 30 tá ligado quando eu salvar ele não deu erro ou seja eu tô tendo que reescrever o objeto inteiro porque esse site o que eu criei ela é do tipo objeto que contém o nome string idade Number Então eu tenho que retornar um objeto novo que contém um nome string e idade Não beleza e essa questão do update se eu salvar ó Object ali eu vou transformar esse objeto num Jason porque aí não consegue printar pra gente salvar e tá lá o nome Christian e idade ali ó top legal agora quando eu clico em executar idade 30 entendeu porque porque eu alterei aqui e executei um objeto zero lógico dava para fazer essas táxi melhor dava mano você pode vir aqui no pegar o objeto atual dar uns três pontinhos nele aqui pegar todas as propriedades dele e também funcionaria da mesma forma tá ali 30 Essa é a questão o update ele exige que você retorne todo o objeto ao contrário disso a gente tem uma montage que define o Saimon Com base no valor atual sem objeto Total colocar esse nome aqui meio estranho mas vamos lá comentar aqui em cima para nós fazer uma cagada naquela hora ó desse ponto o exemplo caute o nome de exemplo caute ainda mas vamos lá dá para entender exemplo o carro de ponto no Tate beleza aí eu tenho um valor atual aqui se eu chamar atual chama o nome nada a ver atual ponto do nome é igual a Cris beleza e salvar Olha isso Christian Cristo Ele é automaticamente funcionou aqui do jeito que a gente tava pensando top a gente vai ter também o update e a gente também vai ter o mutante é interessante saber de cada um mas que complicação Não não é mano vamos lá vamos fazer de uma forma mais simples de entender então o meu set ele vai ser utilizado quando eu quero jogar um valor do novo do zero nele eu quero inicializar acertar outro valor nele ponto isso é o 7 Beleza o meu update eu aconselho se eu não me engano tá isso até as páginas da Google utilizem o update quando o seu sai não for um objeto com valor primitivo Então vamos suposto você tem um objeto que é do tipo string um Sailor de string um sailon de Number um Sailor de bolha por exemplo é um objeto de tipo primitivo ele não é um objeto complexo Então se utiliza o update nesses casos que eu acho que é mais simples para você entender beleza e agora eu tenho um mutante que é utilizado para objetos né mais complexo Então você tem um objeto mesmo você tem uma que é um objeto você vai ter também por exemplo um areia aqui também é um caso interessante utilizar o mutante beleza definindo 7 Quando você quiser acertar um valor do zero update para acertar um valor novo Com base no valor atual mas seu objeto tem que ser do tipo primitivo mutante para acertar um novo valor Com base no valor atual com objetos mais complexos Beleza então é isso que eu queria passar para vocês aqui no executar o vídeo não acabou ainda vamos ficando que agora a gente vai entrar numa parada um pouquinho mais complexa vamos lá então eu vou alterar esse exemplo count aqui ó para que seja simplesão aqui ó vou pôr só meu nome aqui por enquanto Cris e vou salvar como que eu faço para mim pegar o valor desse count aqui gente do mesmo jeito aqui ó se eu vim aqui dar um console. logis. exemploud e você vai chamar como função Beleza quando eu salvo ó valor vem aqui embaixo então algo que vocês precisam saber como desenvolvedor aí provavelmente questão de segundo vocês irem presentes gente vamos falar sobre compilite o que que são computer de size compulsão sai uns que são criados com base em outros sites é não é tão simples assim vou mostrar para vocês o quão avançar é isso E aí depois vocês deixam no comentário aí o que que vocês acharam Beleza então aqui eu tenho de exemplo beleza Vamos mudar esse saiba que eu vou deixar ele começa com um aqui tá bom compre outra de exemplo o que que eu vou mostrar eu vou gerar aqui ó com base em computed é a função chama gente notem que o saibam quando eu tô gerando sai não confio todo dia não tô dando Nil Tá bom eu não dormiu eu jogo direto sai não tá eu confio no edital não é igual um behavior sabe gente um sub gente não é assim que funciona então eu tenho aqui vou chamar uma função e aí dentro dessa função ó eu coloco o dólar e agora eu vou invocar aquele exemplo caute ali beleza invoquei um exemplo caute e vou colocar uma string com o nome de qualquer outra então se no meu HTML agora eu tive vamos ver o que que vai acontecer toda vez que eu saio alterar o conteúdo a gente vai alterar vamos vamos fazer um teste eu vou vir aqui no executar vou desenvolver um executar aqui acho que vai ficar melhor exemplo caute ponto update porque eu quero executar Com base no Valor anterior Beleza então o valor atual vai ser é o contador né então louco atual é mais um tá joia simples dessa forma aqui olha só executei o conflito de ele entendeu que tem esse saíram aqui vamos entender um pouco mais sobre esse conteúdo aqui agora agora o bagulho vai ficar sério ou confio ter dito sai não ele é muito eficaz e muito inteligente ele é inteligente para um olha só quando ele executou esse aqui porque eu tô chamando ele no template do Ender quando ele executou esse conflito de gente ele vai passar aqui executar essa linha exemplo caute quando ele executa o conteúdo de passa pela linha exemplo nocaute ele entende o seguinte olha exemplo Claro exemplo caute é uma dependência beleza OK então eu quero que toda vez que o exemplo o count for alterado você eu quero ser notificado então toda vez que ele é alterado sai no notifica o conteúdo porque a última vez que executou ele passou pelo exemplo Country então ele ó executou com o filtro passou pelo exemplo caute aí ele fala toda vez por exemplo o carro de volta é errado eu quero ser notificado quando eu clico aqui altero ele para mais um altero ele e ele notifica esse cara que é alterado também notifica aqui que mostra um novo valor Aqui Acontece muito rápido mas por baixo dos painéis que acontece por que que eu falo toda vez ele passa por essa linha porque vamos supor que por algum motivo Ele não passe pelo exemplo do Caos depois eu vou dar um exemplo mais complexo sobre isso E aí automaticamente o sal já vai entender que quando atualizar esse cara ele não tem que passar por aqui ou seja ele não tem que passar por aqui quando a execução dele não passar por esse código no caso não dá para ver isso agora porque tá passando toda vez né Toda a execução tá passando por ele mas vamos colocar um exemplo um pouquinho mais complexo aqui para bugar um pouquinho a cabecinha vamos lá então ó eu vou gerar um novo sai e não aqui ó inclusive esse exemplo que eu tô dando é um exemplo que eu peguei lá no Google Tá ok eu acho o vaso dá uma olhada lá esse show count sai no quando esse cara for verdadeiro a gente vai mostrar esse exemplo aqui então eu vou mudar o meu conteúdo de exemplo aqui ó Ao invés dele retornar uma string de cara ele vai ter Tá pera aí antes de entrar nesse top eu acho que é interessante mostrar uma outra coisa aqui também vocês vê o quão eficaz é isso eu vou dar um console.
log passei ó passei pelo Campus aí aqui embaixo ele dá um retorno essa estrelinha aqui ok tô dando console. log para mostrar para vocês quando é executado ou seja ele tá sendo chamado que como uma função porém o conteúdo de exemplo ele vai mostrar quando ele vai ser executado Olha isso ó passei pelo computador já tá aqui embaixo eu vou alterar passei pelo convite Passei passei Passei passei Olha isso ele só tá chamando a função quando o sai não aqui de cima não foi alterado agora por que que eu falo para não chama e funções Olha isso teste de função só um exemplo console. log pulsão ponto e vírgula Ok E aí eu vou pegar Inclusive eu vou dar um retorno aqui vou jogar isso aqui função ok Ponto de Vista agora vou vir aqui no p e vou declarar um peixe função e eu vou chamar uma função comum aqui ó que é o nosso teste de função saca só Gente esse cara tá na Dom ele já foi chamado quatro vezes aqui ó foi chamado quatro vezes e o nosso Saimon foi chamado uma vez só Então olha o bom mais eficaz é isso o sai não notifica o engole para ele poder fazer ali né a renderização eu vou clicar no executar aqui agora executei e alterei só o site não tem nada a ver com esse cara aqui ó e ele já executou a função duas vezes por isso que eu falo evitem chamar a função ladrão beleza remover essa função aqui remover aqui agora a gente segue tutorial queria passar isso para vocês legal a gente tá com o nosso conflito de exemplo aqui agora eu vou dar um exemplo aqui do nosso carro aqui foi onde eu parei então vamos fazer o seguinte se o chão de nós como que eu faço para pegar o valor dele aqui se ele for verdadeiro ele retorna esse cara senão ele vai retornar um nada gente aqui a gente vai entender quando o conflito de acionado então eu vou mudar aqui ó computent acionado beleza e olha só eu vou salvar e ele vai aparecer aqui ó um computed tá aparecendo um filtro de executou aqui e no nosso log com o filtro de acionado Ok tá tudo do jeito que a gente queria para gente entender melhor vou pomper aqui show account que é o nosso site e vou colocar aqui ó Então se o seu carro o que que vai acontecer esse cara tá tru ele vai executar essa linha aqui quando sai não executar essa linha já expliquei executar o exemplo caud ele vai passar por esse por esse cara aqui quando ele passa por esse cara automaticamente ele vai entender opa pera aí esse sai não aqui agora é uma dependência desse conteúdo então toda hora que o exemplo count foi alterado toda hora que esse sai não for alterado eu quero ser notificado aí o conteúdo a gente vai ser notificado e vai alterar a Dom porém gente foca se o seu carro te for falso ele vai executar isso aqui e ele não vai passar por aqui quando ele não passa por aqui o compilo tem ele não entende que esse cara é ainda é uma dependência do conteúdo então depois vamos supor esse cara tá falso ele executou esse cara aqui de baixo e não passou por aqui se ele não passou por aqui pela última vez eu posso alterar esse cara que a gente não vai ver o logo seja ele não vai notificar o campude vocês bota fé nisso Olha só vou mostrar isso para vocês eu vou gerar um novo botão aqui ó que é um botão que vai se chamar mostrar quer dizer alterar beleza e aí eu tenho clique aqui que vai ser a função alterar essa função não existe eu vou criar ela aqui agora então vamos lá vem aqui alterar E aí aqui ó desconto showcaute ponto update tá bom que é o valor atual essa função ela vai ficar fazendo um tanto ele vai pegar o valor atual se dá tudo vai ser falso tá faltando se vai estar tudo gente vamos recapitular aqui ó então toda vez que eu clicar no botão executar que eu tô alterando esse count aqui ele vai executar o contrato de exemplo porque se tá true ele tá passando aqui e aí ele tá entendendo né quando é true a única vez que eu mudo ele patroa quando é true ele vai executar esse código E aí quando ele executar ele vai entender que exemplo o Counting é uma dependência então toda vez que a gente alterar o exemplo clicando no executar ele vai fritar o conflito de acionado porque passou pelo conteúdo de beleza vamos ver isso Ó computer de acionado porque o nosso show o count começa com truco agora vou vir clicar em executar por quê toda hora que eu tô trocando sai não ele tá passando pelo conteúdo e agora Olha a loucura eu vou alterar o seu carro para falso alterei para falso quando eu altero para falso o showcald também é uma dependência de computer de exemplo Beleza então ele executou aqui por isso que ele apareceu copio tente acionado aqui também quando ele aparece aqui o checkout ele passou por aqui ele não passou por esse cara então agora gente quando eu alterar o exemplo count aqui clicando no nosso botão quando eu alterar o valor dele vocês não vão ver esse cara subir aqui porque que não vão ver porque o sai no automaticamente se da última vez que ele executou ele não passou por esse cara então esse cara deixa de ser uma dependência dele então olha isso tá falso executar 5 6 7 8 9 10 Vocês estão vendo que o valor de quatro tá mantendo aqui ó quatro comprimidos de acionado ele não mudou esse valor ou seja ele não tá chamando como gente porque o exemplo caunter da última vez que executou ele não passou por aqui então esse exemplo é um carro deixou de ser uma dependência do nosso conjunto de mano olha o pão otimizado é isso para a questão de ó é detector de mudança se eu não mudei o meu conteúdo de exemplo a biedão também não foi notificada então isso aqui fica muito mais potente agora eu vou voltar ele para troll de novo e quando eu voltar esse cara Pra tu ele vai executar essa linha e o exemplo count vai voltar a ser uma dependência do nosso conteúdo de exemplo olha só voltei para true agora ele pegou até lá em cima lá já ó 14 agora Olha só esse 14 aqui ó vamos mudar 6 7 ó 8 9 10 11 12 13 14 15 16 Enfim então vocês entendem o quão inteligente é isso cara o quão é essa mudança por isso que a galera só fala nisso cara porque isso aqui é cara é absurdo é muito louco cara é muito louco mesmo Demorou então agora que a gente deu uma olhada nesse capítulo aqui a gente entendeu um pouquinho eu vou mostrar para vocês aqui agora Como que funciona os efeitos gente effect são efeitos né seria um efeitos colaterais é basicamente eles são disparados como que eu posso dizer isso eles são disparados é como um efeito colateral ele tem que ser declarado no Construtor então eu vou vir aqui ó efect e aqui dentro eu vou passar uma função Beleza eu vou passar aqui ó console.
log alterou alterou no effect E aí ele vai funcionar gente inclusive um pouco com aspas assim ele vai funcionar basicamente do mesmo jeito que o exemplo que o que o nosso conteúdo então quando eu colocar aqui ó diz desconto exemplo caute chamar dessa forma o exemplo caute vai entender que ele tá dentro desse efect e toda vez que eu alterar ele esse effect vai ser alterado sozinho vai ser chamado novamente Olha só eu vou tirar esse campeão de acionado aqui que a gente já entendeu E olha só alterou no effect um aqui ó Beleza eu vou executar ó 2 3 4 5 6 7 ó ele tá executando esse log aqui simplesmente por ele existir aqui dentro então todos os todos os saimos que tem dentro do meu console blog ou de alguma de alguma lógica que eu colocar dentro do Efésios ele vai ser executado porque porque o effect vai passar vai entender que esse sai não é uma dependência toda vez que ele alterar ele vai ser executado aqui pô Cris você falou que ele só pode ser executado dentro do Construtor Não exatamente gente O correto é jogar ele dentro do Construtor mas por exemplo se eu pôr ele dentro do limite aqui ó Imagino que o ângulo vai dar erro vamos testar essa parada ó tô dentro do onite aqui vou pegar esse código aqui e vou jogar ele dentro do limite beleza Teoricamente é quase uma coisa se constrói Mas já deu ele aqui ó já deu erro dizendo que o effect que é o efeito injection contact Factory funcield nicha lazer hora a faixa e usa de with essa parada gigante aqui como que resolve isso quando você for declarar ele fora do Construtor gente você vai ter que passar o injector injector injector esse injector aqui basicamente é uma injeção de dependência responsável recuperar a injeção Independência e aqui dentro eu passo halter eu basicamente era uma coisa que declarar o halter aqui em cima do Construtor Então esse injector funciona mais ou menos assim Beleza eu vou pegar esse injector aqui agora e vou passar ele aqui ó abre aqui as opções injector diz diz ponto injector ok então quando eu salvo ele vai parar de dar eu e vai funcionar do mesmo jeito legal então agora a gente aprendeu como que a gente utiliza os Effects aqui toma cuidado ele o effect ele tem que ser utilizado gente quando você quer deixar dados e sincronia por exemplo eu quero deixar o meu dado do meu App sincronia colocou histórias Ok eu quero fazer log Ok toma cuidado que as coisas que você coloca aqui às vezes chama uma API e essa pi certo não sai não que vai disparar outra efect e vai Nossa vai virar uma cadeia louca cara toma cuidado com Efésios tá bom não é tão simples assim Beleza então agora a gente vai falar um pouco sobre vou jogar esse efect para cima antes da gente falar um pouco e aí ele estando aqui em cima do Construtor eu não preciso passar esse cara legal removo aqui tá ok segue a vida e tirou o limite aqui legal salvei e é nós beleza agora a gente vai falar um pouco sobre on push tá bom o inglês gente automaticamente Olha só quando qual que é a diferença do oneplus significa que o pessoal vai secar as alterações nesse componente quando um input dele for alterado ou quando alguma coisa dentro dele disparar um evento beleza eu não me lembro exatamente se tem alguma outra situação mas enfim vamos lá vou te dar uma exemplo aqui ó eu vou declarar uma variável que valor é igual beleza e aí eu vou vir aqui dentro e vou puxar aqui o valor beleza e esse é um push aqui que tá chamando é um push teste como ele já tá sendo importado aqui ó amplo esse teste composto eu vou chamar ele no meu HTML embaixo do show aqui então vamos lá top legal quando a gente olha dentro dele ó um peixe com ponte valor legal né o valor dele tá bom gente se eu vim aqui ó acho que o intervalo não é interessante vou dar uns sete intervalo aqui eu sei que não sete interval acho que é isso né que executar agora eu tô não tô lembrando deixa eu por dentro de um Construtor 7 intervalos é uma função mais simples aqui mas para esse caso aqui vai funcionar eu quero que a cada dois segundos desconto Nossa ele inventou uma loucura desse ô meu Deus do céu que que eu tô fazendo de errado Construtor eu quero que ele fica esqueci disso aqui ó vamos lá a cada dois segundos mais igual a um beleza para gente garantir que esse valor tá mudando eu vou colocar um log aqui dizendo o seguinte valor do on Plus valor beleza Quando eu colocar um ponto vírgula aqui ó a cada dois segundos então o valor tampa esse 2 valor do S3 Vocês estão vendo que ele tá mudando só que quando eu olho aqui na Dom ele não tá sendo renderizado porque como eu expliquei quando a gente utiliza eu tô dizendo que ele só vai chegar se acontecer alguma alteração dentro do meu componente quando alterou algum input Então vamos supor que esse valor é um input e o meu App componente tivesse alterado ele aí ia funcionar ou se eu não me engano quando eles parado um evento daqui de dentro um método aqui dizendo vamos supor que eu tenho um botão clique aqui por exemplo um botão aqui dentro quando ele é disparado também é ele iria verificar porque que existe isso não lembra porque é uma maneira de você deixar o seu é otimizado para o Igor não ficar fazendo chaint detection né ficar chamando detector de alterações quando não é necessário então assim você controla mais isso e né de forma de forma óptica você tem mais performance o angler vai executar menos funções na hora que ele tá rodando beleza Porém quando a gente utiliza sai não isso funciona de uma forma diferente então vamos transformar esse valor aqui não sai do um legal como ele não sai não aqui em cima a gente vai chamar ele como uma função beleza e aí no site interval do jeito que tá aqui agora vou chamar o ponto update beleza E esse ponto update aí eu tenho o valor atual tô chamando um update porque ele é do tipo Number eu vou chamar o atual mais um e aqui embaixo no log eu vou ler legal agora quando eu salvo olha isso o valor um dois três tá mudando se a gente olhar esse valor aqui com esse valor aqui ó ele tá mudando por que que ele tá mudando Porque agora não sai não e toda vez que eu sai não é editado dentro dele o sai no notifica o template dizendo que ó você precisa verificar isso aqui mano vocês entendem o qual poderoso essa fita ou o quanto que o time do emagle tá correndo atrás para fazer esse negócio funcionar na hora cara maneiro demais né então é isso que eu queria dizer para vocês Tá bom eu vou apagar ele aqui agora não vou ficar chamando ele aqui para não ficar invocando é memória ator agora o que eu queria dizer para vocês é o seguinte como que eu faço para mim integrar o meu Style com o RX JS isso aqui Inclusive eu vou usar minha service né porque eu acho que faz um sentido utilizar aqui então Olha só vamos supor que antigamente eu gostava de trabalhar dessa forma aqui agora com saia não vai mudar né Mas vamos lá eu vou ter um observa aqui que ele vai ser Private eu vou dizer que sei lá ele é um contador como todo observam igual assim qual o new igual a interval beleza o intervalo para quem não tá acostumado tá gente ele é um observador que fica emitindo o valor a cada um segundo porque eu coloquei mil segundos aqui então ele vai mentir um dois três quatro só para ficar emitindo então ele é um observo bom beleza como ele é um observo eu não consigo que você tá valor nele inclusive esse exemplo que ele vai ficar bom vamos jogar um outro aqui ó e aqui dentro eu passo o valor um por exemplo E aí ele vai jogar aqui esse cara que é um behavio gente de Number beleza que que acontece se eu precisasse desse valor aqui no meu App ponto componente Eu precisaria passar no Construtor minha service né então exemplo sai no exemplo certo beleza ou podia usar um jet também eu tô usando isso aqui para ser menos peso de coisa nova para quem não dá muito acostumado legal e agora se eu quisesse pegar o meu Construtor por exemplo eu podia vir aqui tô olhando meu computo direto acabei de descobrir isso é igual a 10 pontos sai um exemplo declarei ele com o primer ponto carro beleza a questão é que quando eu trabalhava dessa forma eu podia dentro do meu Construtor olha só eu tô dentro do Happy componente eu tô fora do meu sangue e eu podia por exemplo não executar aqui ó chamar o desconto Meu observe para o ponto next e meteu um valor para todo mundo que tá escrito nele quando eu faço isso eu tô eu tô fazendo mais coisas que eu deveria porque essa responsabilidade de gerenciar observa como deveria ficar dentro do da nossa service vocês concorda Então como que a gente resolvia isso eu podia vir aqui e transformar esse cara em privado e aí eu podia ter um método sei lá e esse gedicaout ele vai retornar o desconto count é observa Beleza quando eu faço isso aqui no meu webconte eu não tenho a opção de fazer o Next tá errado aqui ó eu só tenho opção de fazer um subscribe nele ó sacou então eu tô Protegendo o meu observa por dentro da minha classe Como que eu faço isso utilizando sai no Ok vamos lá eu vou comentar esse cara aqui agora e aí eu vou utilizar da seguinte forma eu vou ter um primer aqui sei lá Calma que é igual a sino de um beleza e aí vamos supor que eu quero expor esse saiba do mesmo jeito que eu tenho get out que como ele é um sai não olha só você vai ter um count aqui em ponto é de homem Ok quando eu faço um carro aqui no meu Apple componente olha só eu vou referenciar ele direto aqui embaixo que você tá na minha variável desconto sai dá um exemplo que a minha serve-se ponto get count Beleza vou pegar o meu site aqui ponto eu não tenho agora o update eu não posso dar um update no meu sai no eu não posso dar uns sete no meu Sine porque porque se eu venho aqui ó meu sai no é igual ao get count aqui ó se eu para o mouse ele é do tipo Simon de Number beleza Olha a diferença o meu exemplo o count é do tipo Rita bonsai não isso é a diferença então como eu eu consigo fazer a mesma coisa que eu fazia com os observamos aqui não sai não beleza e aí ele vai funcionar da mesma forma eu pego a referência do sai não aqui toda vez que ele alterar e digo mais se você tivesse trabalhando com observa você ia ter que pensar que quando seu a seu componente for destruído você tinha que destruir todas as referências doidas que a gente tá criando aqui ó a gente tá criando defende a gente tá criando conflito de a gente tá criando showcaute exemplo no count isso aqui tudo destruído pelo próprio sai não entendeu isso é muito louco inclusive o effect aqui ó se você quiser Aposte effect refres se você parar o mouse em cima dele ele é do tipo effectress que você consegue destruir manualmente no destrói se você quiser destruir Antes também beleza mas eu vou manter aqui não tem problema então isso que eu acabei de te mostrar é um exemplo como que a gente faz para encapsular lógica Ah eu isso E aí o meu sai não ia ficar um para frente para sempre não você ia vir aqui e colocar um método aqui dentro ou não colocar E aí só o seu service iria iria controlar como que ia ficar ou sai não Beleza você podia vir no seu service também tem um Construtor um efet aqui dentro do seu count para te fizesse log e armazenar assim ele na memória do jeito que tinha que ser beleza topzera mano a gente já tá chegando no final da aula só mais um pouquinho que agora é uma parte importante tá essa parte que eu vou falar aqui agora a gente vai aprender um pouquinho como que Eu transformo saia em observa E observa Isso é muito bom então vamos lá como que Eu transformo esse exemplo caute aqui não observa pô é simples cara você vai vir aqui por exemplo vou até fazer um teste para ver se vai funcionar pode ser que ele funciona mas vamos lá protected exemplo que é igual a Import from @engol/core beleza esse RG JS interropi não sei o que lá tinha outro é esse método aqui que a gente vai utilizar ele então eu vou chamar esse tio observo desconto exemplo count aqui ó dessa forma aqui eu imagino isso aqui ele vai transformar né esse mesmo cara que não observa beleza e aí como esse exemplo caute ele é inicializado se eu vim aqui no nosso exemplo o carro aqui ó Inclusive eu esqueci de pôr né que a nossa observador e utilizar o valor dele é um porém se eu vim aqui alterar para dois ó ele já jogou ali ó dois Lembrando que esse nosso sinal aqui ó ele é o nosso observou então o nosso Observe vou criar isso aqui é muito louco eu inclusive não tinha testado só que eu tô testando na aula o nosso observo criado ele vira uma referência também do nosso Saiyan trabalhando da mesma forma e se eu quiser fazer o contrário Cris Como que eu faço vamos lá vamos aprender também protector de exemplo ao contrário simples to sai não vendo a receita JS também interropi beleza e aqui a gente tem que passar um observo aqui desse ponto exemplo carros dessa forma aqui você vai ter aqui o seu sai no de número de Fire porque é um observo beleza é basicamente isso que eu queria passar para vocês só um toque a mais ou sai-nos ainda não estão eu pelo menos não utilizaria eles como eles de modo tá você não vai conseguir fazer um Deixa eu tirar o pipezinho aqui chamar a criança do jeito que é você não conseguiria no momento gente ter um input aqui por exemplo e trazer o NG Model aqui se eu não me engano para você trazer o NG moto eu nunca sei se é a chave para fora para dentro Cara você não vai conseguir vir isso aqui sentar um exemplo count aqui ó beleza porque não deixa eu ver se é pera aí aguenta Cadê se eu não me engano o MG modo eu vou chamar o coma um mod inteiro aqui ó E aí o NG vai parar vai funcionar só que é para fora né pelo jeito é aqui né é isso é então eles é modo funciona dessa forma vai funcionar só que o exemplo Cláudio não vai funcionar porque eu entro ainda não Tá adaptado a utilizar o NG é modo assim se você quiser utilizar um sino como seu input aí você teria que fazer separado vamos supor todo no seu método você vai vir aqui eu não lembro o que que o inputi seta mas eu acho que se eu não me engano você vai ter que sentar lá seu exemplo count.
