Curso Angular #63: Rotas: Tela de Login e como não mostrar o Menu (NavBar)

[@antoniojuniormota2619]

Nossa cara que incrivel!, essa mulher é sensacional, eu estou no meio de um projeto e me deparei com isso, comecei me atrapalhando com os routes-outlet, kkk bom só me preocupo se algo não esta depreciado, espero que não, no mais me deu a solução 100% muito obrigado.

[@antoniojuniormota2619]

Pra quem terminou o vídeo e quer saber como voltar e sumir o menu, ao terminar o vídeo lá no login component pode colocar essa linha de código. ngOnInit(): void { this.loginAuthService.exposeSideNavEmitter.emit(false); } e implementar na classe do componente de login.

[@luizhp]

Agora são 18:08 e estou desde as 6:30 aqui, com minha cuia de chimarrão e estudando na companhia maravilhosa da fantástica mestra Loiane. Muito obrigado por compartilhar seu conhecimento e seu tempo.

[@Alan-sb3uj]

Esse curso dá gosto de ver, tem tudo nele. Tô vendo aqui depois de 5 anos e tá me ajudando muito, tudo que preciso acho nas aulas :)

[@fabriciocruzz830]

Loiane, muito obrigado pelas explicações do vídeo! Consegui implementar o login em uma aplicação que estou montando, muito obrigado! Gosto da sua didática, é muito boa! Abraço!

EventEmitter nao aceita boolean? Solução: import { EventEmitter } from '@angular/core'

[@juniorngomajose9454]

Muito obrigado, tinha esta dúvida

[@frankendyr]

Loiane você é a melhor!!! Parabéns pelo trabalho! Essa aula me ajudou muuuuuuuitooo!!!! 👏👏👏👏👏👏👏👏

[@renatobento]

Gratidão!

[@TheFernandojrcoroa]

sou iniciante, e esse vídeo me ajudou bastante, eu nunca tinha conseguido implementar uma tela de login em um projeto meu. deu certo seguindo esse vídeo.thanks

[@petersonfreitas2061]

Excelente vídeo. Muito obrigado.

[@walderb.andriola6235]

04-09-2021 ✌😎 Ótimo curso!!! No Angular 12 ocorria o seguinte erro: ERROR Error: If ngModel is used within a form tag, either the name attribute must be set or the form control must be defined as 'standalone' in ngModelOptions. Foi resolvido apenas incluindo nos inputs a tag "name".

[@BruuhMetalcore]

Muito Obrigado amigo

[@HeitorGiacomini]

No angular 14 você deve declarar a propriedade no metodo construtor: export class Usuario { constructor( public nome: string, public senha: string ) {} } ou utilizar o operador!(assignment assertion operator) export class Usuario { nome!: string; senha!: string; }

[@heliomarcio6113]

E como instancia no component ?

[@btkcompany1]

Sei que eh um exemplo, mas pra efeito de camadas, esse router poderia estar no component e o service soh retorna o usuarioautenticado, assim reaproveitaria o auth em outras situações e interagiria com a camada visual soh pelo component

[@flawtista]

Que aula show! Ótima didática Loiane!

[@thiagobfiorenza]

Você mostrou neste vídeo como fazer um login de sucesso. Você tem algum outro vídeo mostrando quando dá erro no login, mostrando a mensagem de usuário ou senha inválidos?

[@alexandrefaculdade]

Loiane! Queria ser rico pra fazer uma estátua em sua homenagem. Tem sido muito importante na vida de muitas pessoas.

[@romariomengo985]

Ótimo vídeo ! Parabéns mais uma vez pelo conteúdo. Mas só para constar, em Ruby não especificamos o tipo de dado de uma determinada variável, pois a linguagem faz a inferência.Ela é sim uma linguagem fortemente tipada, pois os tipos de dados importam em uma operação e por isso não conseguimos por exemplo fazer a seguinte operação: 2 * 'oi' (o contrário é válido, pois a linguagem pega a string e repete a mesma de acordo com o 'número' envolvido). Vale ressaltar que ela ainda possui tipagem dinâmica.

[@loianegroner]

Obrigada pela informação Romário! :)

[@yannpereira2447]

Meu grupo da disciplina de Sistemas Corporativos te ama KKKKK obrigado!!

[@fredcunha2674]

Curso fantástico! Ansioso pelo restante do curso. Falando em restante do curso, tem algum cronograma para as próximas aulas? Muito Obrigado

[@Isabeuh]

Você é sensacionaaaaaal, obrigada

[@davidcostap]

Loiane, parabéns pelo Curso! Eu estava fazendo um curso de angular no alura e abandonei para seguir o seu que esta sensacional! Estou com uma dúvida sobre a utilização da classe material-icons, eu consegui utilizá-la somente colocando a referência diretamente no meu index. Você saberia me indicar um pacote que possa ser instalado diretamente no projeto pelo angular cli?

[@Jvjuino]

Sim, Você pode usar o bootstrap, é o CSS que eu uso, Da tudo certo se você fizer tudo certinho ;) Só tem que prestar atenção nos nomes dos components que o bootstrap tem. O Bootstrap tem os mesmos compoenents do materialize, a única diferencia são os nomes dos components. E nem todas as classes que a loiane usa no HTML vão funcionar no bootstrap, Resumindo: Você pode baixar o bootstrap pelo commando: npm install bootstrap@3 Ou se você preferir, você pode usar o BootstrapCDN que tem que ser adicionado no app.component.html assim: Você tem mais alguma dúvida em que eu possa tentar responder?

[@cassiolins3661]

Muito bom Esses Cursos. Parabéns!!!!!!!

[@guilhermesantanadev]

13:28 -> como não mostrar o Menu (NavBar)

[@giltobarcella]

Esse vídeo me ajudou bastante, obrigado!

[@CafeRei]

Otimo curso Loiane , estou aprendendo bastante, mais tenho uma duvida .. por exemplo .. eu gostaria de usar o AppComponent para carregar o template padrão da aplicação .. mais quando fosse para a rota de Login gostaria de utilizar outro template pois nao é apenas o menu que precisaria esconder .. como eu conseguiria fazer algo como isso.

[@removed107]

Excelente aula.

[@renatafelix3856]

Louca e estou adotando os vídeos e tudo está ficando bem mais claro. Tenho uma duvida: se eu quiser fazer login comparando os dados digitados com uma api ao invés de setado no ir, como eu faria?

[@loianegroner]

Oi Renato, fico feliz que os videos estao ajudando! No caso do login, teria que enviar os dados através de um request http pra API e a API faz a validação.

[@LageAfonso]

Excelente! Parabéns!

[@augustoluna2421]

Parabéns excelente aula!:)

[@lincolnaurelio3887]

excelente, parabéns

Excelente trabalho!!

[@eduardokaiser6413]

estranho, algumas coisas não ficaram igual o seu... por exemplo: não consegui usar o ngModel pois não importei o FormsModule, o refresh da pagina volta pra homeworks e não pra login. Então não vi onde foi que você alterou estes 2 pontos neste vídeo mas alterei aqui para ficar igual

[@rafaelf.b.6198]

Então, talvez não tenha conseguido utilizar o [(ngModel)] porque no minuto 8:55 ela cria a variável usuario como private, porém se tu fizer isso vai dar erro porque essa variável só poderá ser utilizada dentro do login.component.ts. Nesse caso, o que tu precisa fazer é criar a variável sem o private. usuario: Usuario = new Usuario();

[@joaoantunesguimaraes]

Estou com o mesmo problema e ainda não consegui seleccionar.

[@eduardoribeiro4797]

Eu tenho que fazer alguma alteração para versões mais recentes? Pois eu segui passo a passo mas quando a Navbar some ela n volta a aparecer, o valor permanece como false

[@ThiagoBussola]

Mesmo problema

[@DenisHBer]

eu também tive o mesmo problema, e troquei para para "observable" e funcionou perfeitamente, de uma olhada nesse link: loiane.com/2017/08/angular-hide-navbar-login-page/

[@alexpassos590]

Olá... fiz essa configuração funcionou em parte... se eu aperto F5 para atualizar a página volta aparecer o menu ou se aperto o botão voltar no navegador. Como resolver isso?

[@renancoelho5657]

Você está utilizando um subscribe no escopo global que nunca será destruído senão pelo refresh da página. Há um jeito melhor pra se fazer o navbar aparecer utilizando um module pro Dashboard. Nesse module mostraremos o navbar. No module principal (AppModule) que contém a página de login não aparecerá o navbar. Não seria melhor assim?

[@MarcellStone]

O exemplo da aula é para efeito de aprendizado.

[@linkopaladino]

interessante!

[@linkopaladino]

A questão mano que é bom isso ser global, para cada pagina verificar se está logado ou não! mas teria que destruir depois de um tempo!

[@DaviMelkCCB]

Eu fique com uma duvida... Venho da linhagem do PHP, pelo que eu vi toda vez que você recarrega a tela, o usuário é perdido dando a entender que não segura na memória o usuário... Como "gravar" na memória do navegador ou do servidor o usuário se precisar criar um carrinho ou mesmo o login... Perguntas: Como funciona as variáveis de sessão no node e no angular, pode fazer um vídeo de exemplo? Como funciona Store?

[@itagian]

Parabéns

[@andre36pavan]

Olá! Só acrescentando: aos 6:55 você falou que o Python é uma linguagem fortemente tipada e é exatamente o contrário. Tanto que em Python podemos fazer: a = 1 a = "b" a = 4 * 4 resultado de a: 16. De resto, adorei sua aula. Você tem uma ótima didática

[@thiagomedeiros8995]

Python é fortemente tipada. Isso que exemplificou aí é resultado da tipagem dinâmica, mas por baixo dos panos, cada valor (objeto) se mantém intacto. O que muda é para qual objeto a variável 'a' aponta. A tipagem de dados é algo mais que apenas o momento da atribuição a uma variável. wiki.python.org/moin/Why%20is%20Python%20a%20dynamic%20language%20and%20also%20a%20strongly%20typed%20language

[@jacsonlinux]

Obrigado!

[@lipascoal]

Loiane, preciso da sua ajuda! Coloquei jquery no meu menu para fazer um efeito accordion, mas quando coloquei o *ngIf="mostrarMenu" na tag nav como vc ensinou, depois de efetuar o login, esse jquery do menu parou de funcionar, parece q não reconhece mais! Vc pode me ajudar com esse conflito? Me responda por favor!!! Estou precisando muito!!! Obs: muito obrigada por esse teu curso de angular! Me ajudou muito! Sou sua fã! :*

[@alexpassos590]

Olá Loiane... você sabe um link que mostra como fazer um Rest para a tela de login de forma segura? Sem exibir a senha na URL. Aqui você mostra de uma forma interna... Queria ver como passar o usuário e a senha para o rest e consultar no banco.

[@pitosauriorex3674]

olá, vc precisa mandar o objeto usuario pelo body da request, isso evita vc precisar mandar os parametros pela URL.

[@elvisstein1641]

Fiz o procedimento da aula passada porem quando dou o ng serve a compilação para em 92% com uma lista de erros

[@admtimecard4455]

por que meu Emitter não pode receber valor booleano?

[@guilhermesoares4659]

import errado... Coloque " import { Injectable, EventEmitter } from '@angular/core'; "

[@celsoluiz5661]

@@guilhermesoares4659 valeu me ajudou tambem

[@linkopaladino]

@@guilhermesoares4659 vlw mano ajudou muito agora aqui!!!!!!

[@kelvinprimo]

Mas se o usuario der um inspecionar pagina a e navegar até as sources ele consegue ver o menu por lá. como fazer pra deixar esta aplicação segura?

[@amandaavelino8362]

Não, o ngIF remove os elementos do DOM, quando a expressão lógica for false. Portanto, não há brecha na segurança.

[@lucasrosa6340]

Tem que importar o FormsModule onde nesse caso? Dentro do login.component?

[@robisondev]

tô querendo saber também

[@diegowebdg]

Nesse caso, como não temos um módulo específico para o Login, o import deve ser feito no app.module mesmo (acredito que em um caso real, criaríamos um módulo específico para o Login)

[@wagnerdossantos466]

Olá pessoal beleza? Sou programador backend com .Net e iniciante em Angular2, Gostaria de saber se: Como eu concluir esse mesmo objetivo usando uma varável de @OutPut em um componente filho chamado LoginComponent, se é apenas uma abordagem diferente ou é algo não recomendável. Alguem poderia me responder por gentileza?

[@sgumz]

@loiane uma dúvida... quanto a segurança... o usuário não conseguiria injetar e mudar a variável no browser e autenticar de alguma maneira sem realmente estar com login e senha corretos? Não me ficou muito claro isso!

[@loianegroner]

+Sandro Gumz a validacao deve ser feita no servidor e todas as validacoes novamente no servidor. Esse foi apenas um exemplo pra te dar uma idéia de como fazer

[@hudsonholanda3444]

Loiane tô precisando de ajuda na criação de um app como faço pra entrar em contato contigo ?

[@jcebidanes]

Tenta uma das redes sociais dela diretamente loiane.com

[@luizdantasdesign8127]

fala comigo! posso te dar umas dicas!

[@deniulmarques5564]

Cannot read properties of undefined (reading 'email') Caso de essa mensagem, basta adicionar o operador Elvis Presley, na classe. export class Usuario { email?: string pass?: string } usuario: Usuario = new Usuario();

[@FabioMafu]

Vc pode por assim tbm export class Usuario { email!:string pass!: string }

[@carlosalbertobatistacruz]

kk acho legal esse portuglês..

[@sem-nome-west]

MATCHUERALAISE

[@JeanCarlos-ni4fv]

PHP não e uma linguagem Tipada.

[@loianegroner]

Obrigada pela correção! :)

[@amorinhaa05]

Tive problema com o ngModel no input do login.component.html Can't bind to 'ngModel' since it isn't a known property of 'input'.ngtsc(-998002) login.component.ts(6, 34): Error occurs in the template of component LoginComponent. Type 'Event' is not assignable to type 'string'.ngtsc(2322) login.component.ts(6, 34): Error occurs in the template of component LoginComponent. Não sei se está correto, mas foi a forma que funcinou aqui na classe de Usuario alterei nome e senha para any e no app.module acrescentei o import do FormsModule.