What is AngularFire? Observable based - Use the power of RxJS, Angular, and Firebase. Realtime bindings - Synchronize data in realtime. Authentication - Log users in with a variety of providers and monitor authentication state. Offline Data - Store data offline automatically with AngularFirestore. Server-side Render - Generate static HTML to boost perceived performance or create static sites. ngrx friendly - Integrate with ngrx using AngularFire's action based APIs. Manage binary data - Upload, download, and delete binary files like images, videos, and other blobs. Call server code - Directly call serverless Cloud Functions with user context automatically passed. Push notifications - Register and listen for push notifications. Modular - Include only what's needed. No AngularFire package is above 3kb with most under 2kb (gzipped).

How to add firebase to your angular app

//javascript
npm install firebase @angular/fire --save 

Add Firebase config to environments variable Open `/src/environments/environment.ts` and add your ` Firebase` configuration. You can find your project configuration in the Firebase Console. From the project overview page, click Add Firebase to your web app.

//javascript
export const environment = { 
production: false, 
firebase: { 
apiKey: '', authDomain: '', 
databaseURL: '', projectId: '', 
storageBucket: '', 
messagingSenderId: '' 
}
 }; 

Now import what module you need.

For example if your application was using both Firebase authentication and the Firebase database you would add:

//javascript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { AngularFireStorageModule } from '@angular/fire/storage';
import { AngularFireAuthModule } from '@angular/fire/auth';
import { environment } from '../environments/environment';

@NgModule({
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(environment.firebase, 'my-app-name'), // imports firebase/app needed for everything
    AngularFirestoreModule, // imports firebase/firestore, only needed for database features
    AngularFireAuthModule, // imports firebase/auth, only needed for auth features,
    AngularFireStorageModule // imports firebase/storage only needed for storage features
  ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

In our component we need just firestore for now:

//javascript
import { Component } from '@angular/core'; 
import { AngularFirestore } from '@angular/fire/firestore'; 
import { Observable } from 'rxjs'; 
@Component({ 
selector: 'app-root', 
template: `
  {{ item.name }}
` }) 
export class MyApp {
 items: Observable; 
constructor(db: AngularFirestore) { 
this.items = db.collection('items').valueChanges(); 
} 
} 

For more go here: https://github.com/angular/angularfire2/blob/master/docs/install-and-setup.md