After building a simple Angular 4 Firebase Todo app and Angular 4 Firebase Authentication app, here we’re going to learn how to use firebase with Angular 5 using angularfire2 throughout this Angular firebase tutorial.
Firebase is basically developed for mobile and web application development platform built by Google.
The main advantage of firebase is, we can build complex applications without using a traditional backend.
So, let’s see the use of firebase with Angular 5 app and eventually build an Angular 5 firebase example.
1. Setup the Firebase Project
First of all, we need to build a firebase project.
By going to firebase console, you can create your own account and project for free.
1.1 Create Firebase Project
First of all, let’s create a firebase project.
1.2 Go For Web App
Here, we’ve to go for web app.
1.3 Get Firebase Project Config
Now, let’s get the firebase config that we’re going to use in our Angular app to get the connection with firebase project.
1.4 Set Firebase Rules True
Here, we’re not using any authentication method, we’re directly calling the firebase data. So, let’s make the rules True.
We’re all set with firebase project.
2. Create Angular 5 Project
Now, let’s create an Angular 5 app using Angular CLI.
npm install -g @angular/cli@latest
Note: Here, I’ve installed the 1.6.4 version of Angular CLI.
Related,
ng new angular5-firebase-tutorial
cd angular5-firebase-tutorial
Before going further, make sure that your app is running properly.
ng serve
Now, run your app at http://localhost:4200.
3. Install Firebase [angularfire2] In Angular 5 App
AngularFire is the official library for Firebase and Angular.
This angular firebase tutorial is mainly focused on creating an angular 5 firebase example. But it’s compatible with Angular 4 as well with minor changes.
So, if you’re facing any issues with angularfire2, you can visit angularfire2 document
Basically, it allows us to build a bridge between your Angular app and firebase database.
So, let’s install angularfire2 in Angular app.
npm install firebase angularfire2 --save
Now, we’re ready to use firebase with Angular 5 app.
4. Use Firebase With Angular 5 App
Firstly, let’s set the firebase configuration to environment variable in our Angular app.
/src/environments/environment.ts
Note: This configurations are taken from firebase app what we’ve setup intially.
config: { apiKey: "YOUR API KEY", authDomain: "angular5-firebase-tutorial.firebaseapp.com", databaseURL: "https://angular5-firebase-tutorial.firebaseio.com", projectId: "angular5-firebase-tutorial", storageBucket: "angular5-firebase-tutorial.appspot.com", messagingSenderId: "YOUR MESSAGING SENDER ID" }
Now, let’s set up the main module by importing firebaseModules and initilized the app.
/src/app/app.module.ts
//Import browsermodule import { BrowserModule } from '@angular/platform-browser'; //Import core import { NgModule } from '@angular/core'; //Import forms import {FormsModule} from '@angular/forms'; //Import firebase import {AngularFireModule} from 'angularfire2'; import {AngularFireDatabaseModule} from 'angularfire2/database'; //Import App component import { AppComponent } from './app.component'; //Import environment import {environment} from '../environments/environment'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, FormsModule, AngularFireModule.initializeApp(environment.config), //Initialize firebase AngularFireDatabaseModule, // for database ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
Here, we’re ready to use the firebase in our app.
Now, it’s just required to import the necessary dependencies in your component. Here, we’re are using app component.
/src/app/app.component.ts
//Import core import { Component, OnInit } from '@angular/core'; //Import firebase dependencies import {AngularFireDatabase, FirebaseListObservable} from 'angularfire2/database-deprecated'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], providers: [AngularFireDatabase] }) export class AppComponent implements OnInit { title = 'Angular Firebase Tutorial'; user = {}; users: FirebaseListObservable<any[]>; constructor(private db: AngularFireDatabase) {} //Get the data from firebase ngOnInit() { this.users = this.db.list('/users'); } //Save data to firebase onSubmit() { this.users.push(this.user); this.user = {}; } }
Finally, we have got the HTML with the form to submit the data to firebase and populate the data fetched from firebase.
/src/app/app.component.html
<div class="container"> <div class="row"> <h1 align="center"> Welcome to {{ title }}! </h1> <div class="col-md-6"> <h2>Form to enter data</h2> <form (ngSubmit)="onSubmit()"> <div class="form-group"> <label for="firstName">First Name</label> <input type="text" class="form-control" placeholder="Enter First Name..." id="firstName" required [(ngModel)]="user.firstName" name="firstName"> </div> <div class="form-group"> <label for="lastName">Last Name</label> <input type="text" class="form-control" placeholder="Enter Last Name..." id="lastName" required [(ngModel)]="user.lastName" name="lastName"> </div> <div class="btn-group"> <button type="submit" class="btn btn-success">Submit</button> </div> </form> </div> <div class="col-md-6"> <h2>Content from Firebase</h2> <pre *ngFor="let user of users | async"> {{user.firstName}} | {{user.lastName}} </pre> </div> </div> </div>
Furthermore, you can apply the reactive form approach for your HTML forms and can implement the form validations.
Note: Here, I’ve used bootstrap CSS in index.html to beautify the HTML.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
Now, run your app and see the browser window. The following would be the output.
That’s it, I hope you loved this Angular Firebase Tutorial and it helped you to learn the use of firebase with Angular 5.
Furthermore, if you’re looking for the code, here is the Github repository for Angular 5 Firebase Example.
Final words, don’t forget to share with your friends on below social media.
Leave a Reply