Ionic 3 and Firebase Using database

Ionic 3 and Firebase Using database 

Create Ionic Project :

Ionic Start [Projectname] Blank --type=ionic-angular

Switch Project Directory

Create Firebase Account the create New  Project  then get web API config copy the Web Config  Paste the Your App.module.js

import {AngularFireModule} from 'angularfire2';
import {AngularFireDatabaseModule,AngularFireDatabase} from 'angularfire2/database';
import {AngularFireAuthModule} from 'angularfire2/auth';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

const firebaseConfig = {
  apiKey: "AIzaSyCze4AwyQNqNQqHId1ZoSUVBPQptN_NXwQ",
  authDomain: "firedb-49c70.firebaseapp.com",
  databaseURL: "https://firedb-49c70.firebaseio.com",
  projectId: "firedb-49c70",
  storageBucket: "firedb-49c70.appspot.com",
  messagingSenderId: "455535872444",
  appId: "1:455535872444:web:6ff67fe68dfeaf4d"
};

Install This NPM Modules

npm i rxjs@6 rxjs-compat@6 promise-polyfill --save 

{or)

npm install rxjs@6.0.0 --save

npm install firebase angularfire2 --save

Add The Modules in app.modules.ts

import {AngularFireModule} from 'angularfire2';

import {AngularFireDatabaseModule,AngularFireDatabase} from 'angularfire2/database';

Add the Imports:

imports: [ 
    AngularFireAuthModule, 
    AngularFireModule.initializeApp(firebaseConfig),
   AngularFireDatabaseModule
  ]

Add The Modules in Home.ts   

import {AngularFireDatabase} from 'angularfire2/database';

Codes:

home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Firebase Example
    </ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
  <form [formGroup]="RegisterForm">
  <ion-list>
  <ion-item>
  <ion-input formControlName="Fname" type="text" placeholder="Enter Your FirstName"></ion-input>
  </ion-item>
  <div class="red" *ngIf="RegisterForm.controls.Fname.value=='' && !RegisterForm.controls.Fname.valid && RegisterForm.controls.Fname.dirty">
  Enter User Fname
  </div>
  <ion-item>
  <ion-input formControlName="Lname" type="text" placeholder="Enter Your LastName"></ion-input>
  </ion-item>
  <div class="red" *ngIf="RegisterForm.controls.Lname.value=='' && !RegisterForm.controls.Lname.valid && RegisterForm.controls.Lname.dirty">
  Enter User Lname
  </div>
  <ion-item>
  <ion-input formControlName="Username" type="text" placeholder="Enter Your UserName"></ion-input>
  </ion-item>
  <div class="red" *ngIf="RegisterForm.controls.Username.value=='' && !RegisterForm.controls.Username.valid && RegisterForm.controls.Username.dirty">
  Enter User Name
  </div>
  <ion-item>
  <ion-input formControlName="Email" type="text" placeholder="Enter Your Email"></ion-input>
  </ion-item>
  <div class="red" *ngIf="RegisterForm.controls.Email.value=='' && !RegisterForm.controls.Email.valid && RegisterForm.controls.Email.dirty">
  Enter User Email
  </div>
  <ion-item>
  <ion-input formControlName="Password" type="password" placeholder="Enter Your Password"></ion-input>
  </ion-item>
  <div class="red" *ngIf="RegisterForm.controls.Password.value=='' && !RegisterForm.controls.Password.valid && RegisterForm.controls.Password.dirty">
  Enter User Password
  </div>
<button ion-button color="secondary" full (click)="Register(RegisterForm)">Register</button>
  </ion-list>
  </form>
<div class="row header">
<div class="col"> Fname</div>
<div class="col">Lname</div>
<div class="col">Username</div>
<div class="col">Email</div>
<div class="col">Password</div>
</div>
<div class="row s" *ngFor="let row of records">
<div class="col">{{ row.Fname }}</div>
<div class="col">{{ row.Lname }}</div>
<div class="col">{{ row.Username }}</div>
<div class="col">{{ row.Email }}</div>
<div class="col">{{ row.Password }}</div>
</div>
</ion-content>

Home.ts

import { Component } from '@angular/core';
import { NavController,ToastController} from 'ionic-angular';
import {AngularFireDatabase} from 'angularfire2/database';
import {Validators,FormGroup,FormControl} from '@angular/forms';
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
RegisterForm:FormGroup;
records;
  constructor(public navCtrl: NavController,private fdb:AngularFireDatabase,public toast:ToastController) {
this.formInit()
  }
  formInit(){
this.RegisterForm = new FormGroup({
Fname: new FormControl("",[Validators.required,Validators.maxLength(10)]),
Lname: new FormControl("",[Validators.required,Validators.maxLength(10)]),
Username: new FormControl("",[Validators.required,Validators.maxLength(10)]),
Email: new FormControl("",[Validators.required,Validators.maxLength(30)]),
Password: new FormControl("",[Validators.required,Validators.maxLength(20)])
});
}
Register(formData){
if(!formData.valid){
this.RegisterForm.get('Fname').markAsDirty();
this.RegisterForm.get('Lname').markAsDirty();
this.RegisterForm.get('Username').markAsDirty();
this.RegisterForm.get('Email').markAsDirty();
this.RegisterForm.get('Password').markAsDirty();
}else{
this.fdb.list("/register/").push({
Fname:formData.value.Fname,
Lname:formData.value.Lname,
Username:formData.value.Username,
Email:formData.value.Email,
Password:formData.value.Password
});
let toast = this.toast.create({
      message: 'Register SuccessFully',
      position: 'bottom',
      duration: 4000
    });
    toast.present();
this.RegisterForm.reset();
}
}
ionViewDidLoad(){
this.fdb.list('/register').snapshotChanges().subscribe((res) => {
let tempar:any = [];
res.forEach((ele) => {
tempar.push(ele.payload.val())
});
this.records=tempar;
})
}
}

Home.Scss

 page-home {
.red {
    background-color: #eca7a799;
    color: #e01414d1;
    width: 94%;
    height: 35px;
    padding: 8px;
    margin: 6px 1px 1px 41px;
    border-radius: 10px;
}
.header .col {
  background-color: #49c2f3;
}
    .row.header {
    margin-top: -12px;
    margin-left: -16px;
    margin-right: -15px;
    }
    .row.s {
    margin-left: -15px;
    margin-right: -21px;
}
}

Output:

Ionic 3  Store Data With Fire Store

Install this NPM:

npm install firebase@6 angularfire2  rxjs@6.0.0  rxjs-compat --save

App.Module.ts:

      import {AngularFireModule} from 'angularfire2';

    import {AngularFirestore,AngularFirestoreModule} from 'angularfire2/firestore';

      var firebaseConfig = {

       apiKey: "",

       authDomain: "",

      databaseURL: "",

       projectId: "",

       storageBucket: "",

        messagingSenderId: "",

         appId: ""

  };

imports: [

    BrowserModule,

    AngularFirestoreModule,

     AngularFireModule.initializeApp(firebaseConfig),

    IonicModule.forRoot(MyApp)

  ],

YourHtml.js:

import { AngularFirestore, AngularFirestoreCollection }  from 'angularfire2/firestore';

import { Observable } from 'rxjs';

export class HomePage {

RegisterForm:FormGroup;

private userreg: AngularFirestoreCollection<Users>;

  constructor(public navCtrl: NavController,private afs:AngularFirestore) {

this.formInit();

  }

formInit(){

this.RegisterForm = new FormGroup({

Username: new FormControl("",[Validators.required,Validators.maxLength(20)]),

Password: new FormControl("",[Validators.required,Validators.maxLength(20)])

});

this.userreg=this.afs.collection<Users>('users')

}

signup(formData){

if(!formData.valid){

this.RegisterForm.get("Username").markAsDirty();

this.RegisterForm.get("Password").markAsDirty(); 

}else{

let userdata={

username:formData.get("Username").value,

password:formData.get("Password").value

}

const id = this.afs.createId();

 this.userreg.doc(id).set(userdata);

}

}

}