Firebase is a mobile and web application development platform developed by Google. We can build our apps very fast, without making complex back-end system. It helps to scale automatically, for even the largest apps. In this Angular Firebase tutorial, we’re gonna go through the steps to integrate Firebase into Angular 5 App with AngularFire2 5.0.
I. Technology
– Angular 5
– AngularFire2 5.0
II. Step by Step
1. Set up the Firebase Project
Go to Firebase Console, login with your Google Account, then click on Add Project.
Enter Project name, select Country/Region:
Press CREATE PROJECT, browser turns into:
Click on Add Firebase to your Web App, a Popup will be shown:
Save the information for later usage.
Choose Database in the left (list of Firebase features) -> Tab RULES, then change .read and .write values to true:
2. Install AngularFire2
Before installing AngularFire2, make sure that we have latest version of Angular-cli installed. The lowest compatible version is 1.x.x-beta.14. We also need Typings, and TypeScript.
So, if you don’t have these things, try to install them:
|
1 2 3 4 5 6 |
npm install -g @angular/cli@latest # or install locally npm install @angular/cli --save-dev npm install -g typings npm install -g typescript |
2.1 Create Angular project
|
1 2 |
ng new <project-name> cd <project-name> |
2.2 Install AngularFire2 and Firebase
|
1 |
npm install angularfire2 firebase --save |
3. Use AngularFire2 in Angular Project
3.1 Add Firebase config to environments variable
Open /src/environments/environment.ts, add your Firebase configuration that we have saved when Popup window was shown:
|
1 2 3 4 5 6 7 8 9 10 11 |
export const environment = { production: false, firebase: { apiKey: 'xxx', authDomain: 'jsa-angular5.firebaseapp.com', databaseURL: 'https://jsa-angular5.firebaseio.com', projectId: 'jsa-angular5', storageBucket: '', messagingSenderId: 'xxx' } }; |
3.2 Setup @NgModule
Open /src/app/app.module.ts, import AngularFireModule and other AngularFire2 modules if necessary. Don’t forget specify Firebase configuration with AngularFireModule.initializeApp(firebaseConfig):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { AngularFireModule } from 'angularfire2'; import { AngularFireDatabaseModule } from 'angularfire2/database'; import { environment } from '../environments/environment'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, FormsModule, AngularFireModule.initializeApp(environment.firebase), AngularFireDatabaseModule, // for database ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } |
3.3 Use AngularFire module in Angular component
Open /src/app/app.component.ts:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
import { Component } from '@angular/core'; import { AngularFireDatabase } from 'angularfire2/database'; import { Observable } from 'rxjs/Observable'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'JavaSampleApproach'; description = 'Angular5-Firebase Demo'; itemValue = ''; items: Observable<any[]>; constructor(public db: AngularFireDatabase) { this.items = db.list('items').valueChanges(); } onSubmit() { this.db.list('/items').push({ content: this.itemValue }); this.itemValue = ''; } } |
/src/app/app.component.html:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<div class="container-fluid"> <div style="color: blue;"> <h1>{{title}}</h1> <h3>{{description}}</h3> </div> <div style="width: 300px;"> <form (ngSubmit)="onSubmit()"> <div class="form-group"> <label for="item">Item</label> <input type="text" class="form-control" placeholder="Enter content..." id="item" required [(ngModel)]="itemValue" name="item"> </div> <div class="btn-group"> <button type="submit" class="btn btn-success">Submit</button> </div> </form> </div> <h2>Content from Firebase</h2> <div class="col-md-3"> <pre *ngFor="let item of items | async">{{item.content}}</.pre> </div> </div> |
III. Check Result
– Open browser with url http://localhost:4200/, enter Item content.
Item data displays immediately:
– Firebase Console Database:
hi , i tried to this, i can write to DB,
but cann’t read .
2) there is a in the ending tag of pre ( i think this a typo.)
3) can you help me how can i debug and understand why cann’t read from Db ( db rules are write and read = true)
It works like a charm.Spend some time trying to make it work.Read useless materials(angular version not specified )
thus the nightmare.
Thanks.