A algum tempo venho implementando dialogs nos meus projetos, mais especificamente os do Angular Material, por serem de fácil implementação e digamos, maleáveis, até certo ponto, porém notei que muitos eu poderia reutilizar, nisso acabei criando um módulo para agrupar esses que são comuns entre vários outros módulos, dai nasceu o dialog.service
Continue reading →
Criando componente de email e senha
O Id do provider de autenticação de email e senha dentro do authentication é password, porém como fica semanticamente pobre para entendimento, eu costumo descrever o componente que crio para o formulário como auth/auth-email-password
Essa informação vem de firebase.auth.EmailAuthProvider.PROVIDER_ID, mas não se assuste, iremos ver isso mais tarde. =D
Então vamos codar, vamos adicionar o componente
ng g c auth/auth-email-password
CREATE projects/principal/src/app/auth/auth-email-password/auth-email-password.component.scss (0 bytes)
CREATE projects/principal/src/app/auth/auth-email-password/auth-email-password.component.html (34 bytes)
CREATE projects/principal/src/app/auth/auth-email-password/auth-email-password.component.spec.ts (707 bytes)
CREATE projects/principal/src/app/auth/auth-email-password/auth-email-password.component.ts (320 bytes)
UPDATE projects/principal/src/app/auth/auth.module.ts (379 bytes)
Continuando o layout, adicionando o Bootstrap
E por isso vamos instalar o bootstrap no nosso projeto, e para isso vamos usar a lib ngx-bootstrap, o comando agora é um pouco diferente, como o ngx-bootstrap provém schematics, isso é, ele atualiza o projeto aonde é necessário para seu funcionamento, no caso dele no package.json e no angular.json
Para maiores informações sobre schematics visite https://angular.io/guide/schematics-for-libraries
Bem, vamos nessa, no console digite: ng add ngx-bootstrap
Arrumando o layout
Primeiro, quero colocar um background na tela de auth, porém somente na tela de auth.
Mas como se é um component, e o background para ficar bom precisa ser estilizado no body?
Primeiro preciso de um background, adicionei um a pasta assets/images, pasta images essa que eu criei.
projects/principal/src/assets/images/auth-background.png
Criando os módulos e components de auth
O que costumo fazer é ter um módulo chamado, auth.module.ts
Para isso uso o comando de gerar módulo do CLI do Angular, o ng g(generate) m(module), no caso, ng g m auth, ele irá criar uma pasta chamada auth com o módulo dentro dela
Vamos nessa?
ng g m auth
CREATE projects/principal/src/app/auth/auth.module.ts (190 bytes)
Durante essa série de artigos iremos ver tudo que a aba Desenvolver do console do Firebase oferece:
Authentication, Database, Storage, Hosting,Functions
E o que precisamos para isso?
Acredito que vc já tenha familiaridade com gerenciadores de pacotes, no caso uso o NPM https://www.npmjs.com/ e será com ele que os exemplos serão exemplificados 😋
Para ter o NPM instalado primeiramente instala o nodejs https://nodejs.org/en/, caso ainda não tenha, esse é o momento de instalá-lo
Costumo criar projeto Angular dessa forma por considerar que ficam muito mais organizados, pois todas as aplicações são adicionadas dentro da pasta projects
No console vc vai criar o projeto usando o ng new nome-projeto, porém usando –createApplication=false para não ciar aplicação e –interactive=false para que as opões de adicionar módulo de rota e escolha de pré processador css não sejam mostradas, já que como não será criado uma app, isso não terá efeito prático
ng new nome-projeto --createApplication=false --interactive=false