What is angularfiredatabase
Angularfiredatabase means used fire 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.
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 the angularfirestore 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>
Visit the angular tutorial list. And make strong your angular concept. click here. wuschools.com is 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.
After installing angularfiredatabase with this cmd – npm install firebase @angular/fire –save ,
Is there need again to install Firebase and angularFire2 – npm install angularfire2 firebase –save ?
According to what you said, “We need to add angular 2 firebase libraries into our project” .
Doesn’t the first cmd to install angularfiredatabase take care of that?
no need to install firebase and anfularfire2 in the same project but if you change your project you have to need again do these things!
Yes, we need to add angular 2 firebase libraries into our project.
Refreshing. You never diissapoint. Thank you for sharing..