Angular ~ Firebase - rohit120582sharma/Documentation GitHub Wiki

Introduction

• It a platform provided by google to create the backend of web/mobile application.
• Library - different lanagulages.
• Real-time bindings - Synchronize data in real-time.
• Authentication - Log users in with a variety of providers and monitor authentication state in real-time.
• ngrx friendly - Integrate with ngrx using AngularFire's action based APIs.

Reference

• https://github.com/angular/angularfire2

---

Set up the Firebase Project

• Visit the Firebase Console and create a new project.
• Click on "Add Firebase to your web app" and copy the following information to a text file for later reference.
• Click on the Authentication tab and enable Anonymous.
• Click on the Database tab and then the RULES tab at the top. Change .read and .write values to true.

---

Integrate Firebase with Angular

go to project folder and install Firebase and AngulaFire2. We need both of these packages in order to communicate with Firebase.

npm install firebase angularfire2 --save

Setup @NgModule

open /src/app/app.module.ts, inject the Firebase providers, and specify your Firebase configuration.

import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule } from 'angularfire2/database'; // imports firebase/database, only needed for database features
import { AngularFireAuthModule } from 'angularfire2/auth'; // imports firebase/auth, only needed for auth features

// Add the config
const firebaseConfig = {
	apiKey: "AIzaSyAUQPWQp8vuiP6vFD4eK75erk-yJk7McDA",
	authDomain: "fir-demo-4ee2a.firebaseapp.com",
	databaseURL: "https://fir-demo-4ee2a.firebaseio.com",
	projectId: "fir-demo-4ee2a",
	storageBucket: "fir-demo-4ee2a.appspot.com",
	messagingSenderId: "259322484992"
}

// Add imported modules to `imports` array of @NgModule decorator:
@NgModule({
	imports: [
		AngularFireModule.initializeApp(firebaseConfig),
		AngularFireDatabaseModule,
		AngularFireAuthModule
	]
})

@Injectable Service

create /src/app/services/firebase.service.ts, inject the needful Firebase services.

import { Injectable } from '@angular/core';

import { AngularFireAuth } from 'angularfire2/auth';
import { AngularFireDatabase } from 'angularfire2/database';
import { Observable } from 'rxjs/Observable';
import * as firebase from 'firebase/app';

@Injectable()
export class FirebaseService{
	// Variables
	private _user: any;
	private _courses: any[];

	// Constructor with injected services
	constructor(private _angularFireAuth:AngularFireAuth,
		    private _angularFireDatabase:AngularFireDatabase){
		_angularFireAuth
			.authState
			.subscribe((response)=>{
				console.log(`------------------------`);
				console.log(response);
				this._user = response;
			});
	}

	// API
	login(){
		this._angularFireAuth.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider());
	}
	logout(){
		this._angularFireAuth.auth.signOut();
	}
	get user():any{
		return this._user;
	}
	getCourses(){
		this._angularFireDatabase
			.list('courses')
			.subscribe((response)=>{
				this._courses = response;
			});
	}
}