Using Native Firebase SDK in AngularFire2

Certain functionalities aren’t available in AngularFire2 at the moment, although they are solid in the Firebase Javascript SDK. The opportunity to get access to these Firebase Javascript methods and functions in your AngularFire2 project is crucial.

However, everywhere you turn, you’re told to use declare var firebase: any . Should you? Maybe, but…

No! Use the approach below, and you’ll be a happy developer. It looks cleaner to me though and no hidden surprises. No strange plumbing too is required!

import { Component, Inject } from '@angular/core';
import { AngularFire, FirebaseApp } from 'angularfire2';

@Component({
  templateUrl: 'app/my.component.html'
})

export class ResetpassComponent {
  public auth: any;
  constructor(private af: AngularFire, @Inject(FirebaseApp) firebaseApp: any) {
    this.auth = firebaseApp.auth()
    console.log(this.auth);
  }

  // formData.value.email = 'your@email.com';
  onSubmit(formData) {
     if(formData.valid) {
       console.log('Sending email verification');
       this.auth.sendPasswordResetEmail(formData.value.email)
         .then( (response) => {
           console.log('Sent successfully');
         })
         .catch( (error) => {
           console.log(error);
         })
     }
  }
}

The keyword from the above is the import of the FirebaseApp and Inject.

You likely remember Injectable as use when trying to create a service to inject into other components. See the AngularFire2 Authentication Article for more on that.

Inject the FirebaseApp in your component constructor and fire away as you see above.

Dropping down to the bare bone Firebase SDK allows one to enjoy all the goodness Firebase comes with that aren’t currently wrapped around for AngularFire2.

I do not know how quick it’ll be to wrap around all the functions and methods in Firebase for AngularFire, but I think exposing the Firebase SDK in this way is a real blessing.

So now, you know, forget about declare var firebase: any and the confusion it comes with. The approach above is easy and simple.

For a complete overview of AngularFire2 Authentication, you’re invited to go through my other article.