angularfiredatabase

What is angularfiredatabase

Angularfiredatabase means usedfire database libraries in the angular project for the store and syncing the data at run time. Angularfiredatabase is best for the angular project. Because the fire database supports realtime data store and syncing. Fire database is the no SQL database. Angularfiredatabase is the part of the firebase. And firebase is the main feature of the realtime database. The Firebase database is the product of google that supports store data and syncing data ar run time. And provides the development (web and mobile application platform) platform for the developer with different development tools. By using the firebase api the realtime database is used for store and analyze data for multiple users with different platforms.

Tip:The firebase is available at  https://firebase.google.com/

Interacting with your database

Firebase provides two different database solutions that support realtime data syncing.

1. Realtime database
2. Cloud firestore

Realtime database

Firebase is the original database. AngularFireDatabase is work with the realtime database. Realtime database provides low-latency solutions for web and mobile applications.Read more

Cloud firestore

Firestore is built on the success with a new and more intuitive data model for a developer. Firestores is the release with high features and faster queries more than the realtime database. Firestores is the newest database for mobile app development and a realtime database is the oldest database with slow working. Firebase working fast more than a realtime database. Using theangularfirestore create static HTML to increase your application perceived performance. If you want to read more about the cloud firestore click here.

Install angularfiredatabase

npm install firebase @angular/fire --save

Example

import { Component } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-root',
  template: `
  <ul>
    <li *ngFor="let item of items | async">
      {{ item.name }}
    </li>
  </ul>
  `
})
export class MyApp {
  items: Observable<any[]>;
  constructor(db: AngularFirestore) {
    this.items = db.collection('items').valueChanges();
  }
}

by default Angular project Libraries

Project Setup with Angular 2 CLI

If you haven’t install cli command lind interface (CLI) then first run this code.

$ npm install -g angular-cli

Create a new project of angular

$ ng new angular2fb

Anglar2fb in this folder you have created a new project and inside in this folder, you see the project structure.

Startup the webserver

$ ng serve

And now your project is accessible at http://localhost:4200

Installing Firebase and angularFire2

We need to add angular 2 firebase libraries into our project.

$ npm install angularfire2 firebase --save

Preparing Your Application for Firebase

Take the settings and paste it into a new file environments/firebase.config.ts in the following form:

export const firebaseConfig = {
  apiKey: '<your-key>',
  authDomain: '<your-project-authdomain>',
  databaseURL: '<your-database-URL>',
  storageBucket: '<your-storage-bucket>'
};

And add the types of property to the compilerOptions configuration object in  tsconfig.json .

{
   "compilerOptions": {
    [...],
    "types": [
      "firebase"
    ]
  }
}

Importing AngularFireModule

import { AngularFireModule } from 'angularfire2';

Create Angularfire 2 module

@NgModule({
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(firebaseConfig)
  ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})export class AppModule {}

Inject AngularFire

Go to  app.component.ts and add this

import { AngularFire, FirebaseListObservable } from 'angularfire2';

Inject  AngularFire into that component

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css']
})
export class AppComponent {
  constructor(af: AngularFire) {
  }
}

Get access of firebase data by using the angular fire

Declare an object of type FirebaseListObservable<any[]>

import { Component } from '@angular/core';import { AngularFire, FirebaseListObservable } from 'angularfire2';
@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css']
})export class AppComponent {
  items: FirebaseListObservable<any[]>;
  constructor(af: AngularFire) {
    this.items = af.database.list('/items');
  }
}

For print the data we can use the following code

<ul>
  <li class="text" *ngFor="let item of items | async">
    {{item.$value}}
  </li>
</ul>

Read More

Visit the angulartutorial list. And make strong your angular concept. click here. wuschools.comis always written about agular concept for the angular lover. Ang writes about how angular makes your life easy if you are a web site developer.