Nessa parte iremos fazer a ligação dos dados do angular com o Firebase.

---

Agora sim, vamos integrar tudo e ver a mágica acontecer =D

Na primeira parte criamos uma lista que é alimentada no método form_submit, dessa vez iremos enviar esses dados diretamente ao Firebase e de lá iremos listar no template html
Vamos nós?

Para deixar tudo bem declarado iremos criar um componente para o form e outro para a listagem dos dados.
Mas antes dos componentes vamos criar um módulo específico para o cadastro-pessoa, ele irá definir o escopo dos componentes criados na pasta, mantendo a hirarquia, mais tarde podemos falar mais sobre esse conceito.
Para criar o componente vá ao terminal, dentro da pasta da aplicação e digite o comando

ng g m cadastro-pessoa

Para criar os novos componentes vá ao terminal, dentro da pasta da aplicação e digite os seguintes comandos.

ng g c cadastro-pessoa/cadastro-pessoa-form
ng g c cadastro-pessoa/cadastro-pessoa-lista

Se vc notar os novos componentes foram importados e declarados dentro do módulo cadastro-pessoa, respeitando a hierarquia que queremos seguir.
Isso é feito de forma automática pelo angular cli.

Sempre depois de uma modificação como essas eu novamente inicio o servidor para saber se está tudo bem, em muito momentos nos focamos em codar e esquecemos de verificar possíveis bugs com um simples “ng serve”.
Então, vamos ver se está tudo ok

ng serve

Agora vamos colocar os novos componentes dentro da template html do cadastro-pessoa

Essa parte é um tanto chata, vou tentar explicar de forma simples, ao criarmos o módulo dentro de cadastr0-pessoa, precisamos trocar as referências dos componentes para esse módulo e retirá-las de app.module para que fiquem somente no cadastr0-pessoa.module

Para simplificar vamos mudar primeiramente ao app.module.ts que deve ficar como na imagem abaixo, apenas com o import CadastroPessoaModule

Vamos continuar com o template html do cadastro-pessoa-form 
Copiei tudo que havia no template cadastro-pessoa para ele, ficou como na imagem abaixo

Vamos fazer o mesmo para o código do cadastro-pessoa.component.ts para o cadastro-pessoa-form.component.ts, ficará como na imagem abaixo

Com isso pronto, vamos limpar o cadastro-pessoa.component.ts

Vamos revisar o código do cadastro-pessoa.module, algumas diferenças se fazem presentes, e acho necessário mostrar para um melhor entendimento

Repare que dentro do modulo existem os imports de cada component da pasta cadastro-pessoa, o import de FormsModule, exports dos components e as declarations dos mesmos.

Como eu disse, essa parte é bem chatinha, se por acaso vc achou confusa demais, me avise, faça as críticas necessárias que juntas melhoraremos o entendimento 🙂

Bom, até eu me perdi agora, deixa eu ver aonde estou, perai….

Ah sim, vamos colocar o component cadastro-pessoa-form dentro do template html do cadastro-pessoa, ficará como na imagem abaixo.

cadastro-pessoa.component.ts

Feito isso vamos novamente ver se está tudo ok, lembre-se que até agora apenas modificamos o local do códigos que já escrevemos, por uma questão de entendimento somente, pois como eu disse, essa parte é chatinha, e precisa estar bem fixada para continuarmos.
Vamos lá, ng serve!!

ng serve

Agora vamos retirar a listagem do cadastro-pessoa-form

Algo simples assim

E assim

Agora limpe cadastro-pessoa-form de o que tinhamos da lista

Tudo limpo

E colocamos a lista no cadastro-pessoa.component.html

Como resultado, nada mais funcionará =D
Caso tenha parado o serviço, rode novamente ng serve e veja como ficou

É agora que vamos colocar o firebase para funcionar.
Primeiramente vamos declarar o provider do AngularFireDatabase no arquivo cadastro-pessoa.module.ts

import { AngularFireDatabase } from 'angularfire2/database';
//e
 providers:[AngularFireDatabase]

Agora dentro de cadastro-pessoa-form.component.ts vamos colocar os seguinte códigos

import { AngularFireDatabase } from ‘angularfire2/database’;

Vamos também injetar a depência do AngularFireDatabase

constructor( private angularFire: AngularFireDatabase) { }

Vamos modificar o método form_submit para gravar os dados na base.

form_submit(f: NgForm) {this.angularFire.list("pessoas").push(
{
nome: f.controls.nome.value,
sobrenome: f.controls.sobrenome.value
}
).then((t: any) => console.log('dados gravados: ' + t.key)),
(e: any) => console.log(e.message);
f.controls.nome.setValue('');
f.controls.sobrenome.setValue('');
}

Deve ficar igual a imagem abaixo.

Agora apenas mais detalhezinho, precisamos liberar a leitura e escrita na base de dados, para isso vá até o console do firebase em regras da base de dados
https://console.firebase.google.com/u/0/project/simplesapprealtime/database/rules
E sete as regras para true

Se tudo deu certo, se não quebrou ao rodar o servidor podemos fazer um teste para saber se está gravando na base de dados \0/
Vou gravar um vídeo para mostrar =D

Bom, gravou, agora temos que listar! 
Vamos implementar um pouquinho de código no cadastro-pessoa-lista.component.ts

import { AngularFireDatabase, FirebaseListObservable } from ‘angularfire2/database’;
 pessoas: FirebaseListObservable<any[]>;
constructor(db: AngularFireDatabase) {
this.pessoas = db.list(‘pessoas’);
}

E no cadastro-pessoa.component.html

<h1>Lista de pessoas</h1><ul>
<li *ngFor=”let p of pessoas| async”>
{{ p.nome + ‘ ‘ + p.sobrenome}}
</li>
</ul>

Devem ficar parecido com a imagem abaixo

Agora vamos a mais um vídeo =D

Bom devas, acho que era isso, os fonte estão todos em https://github.com/evlymn/simplesapprealtime

Como eu já havia dito antes, qualquer dúvida e sugestão, por favor, me avisem ❤

Agora vou nanar!
Bjuss.

Ps: Na parte 4 iremos fazer o deploy para o Firebase Hosting =D

0