@@ -178,15 +178,15 @@ export const firebaseConfig = {
178178export class AppModule { }
179179
180180` ` `
181- # ## Inject AngularFire and Bind it to List
181+ # ## Inject AngularFireDatabase and Bind it to List
182182
183- Now inject AngularFire in your component. Open your ` home.ts` by going into ` src/pages/home/home.ts` and make the following changes:
183+ Now inject AngularFireDatabase in your component. Open your ` home.ts` by going into ` src/pages/home/home.ts` and make the following changes:
184184
185- > 1) Import " AngularFire , FirebaseListObservable" at the top of your component.
185+ > 1) Import " AngularFireDatabase , FirebaseListObservable" at the top of your component.
186186
187- > 2) Inject your AngularFire dependency in the constructor.
187+ > 2) Inject your AngularFireDatabase dependency in the constructor.
188188
189- > 3) Call the list method on angularFire ' s database object .
189+ > 3) Call the list method on the AngularFireDatabase module .
190190
191191Your ` home.ts` file should look like this.
192192
@@ -195,7 +195,7 @@ Your `home.ts` file should look like this.
195195import { Component } from ' @angular/core' ;
196196import { NavController } from ' ionic-angular' ;
197197
198- import { AngularFire , FirebaseListObservable } from ' angularfire2' ;
198+ import { AngularFireDatabase , FirebaseListObservable } from ' angularfire2/database ' ;
199199
200200@Component({
201201 selector: ' page-home' ,
@@ -205,8 +205,8 @@ export class HomePage {
205205
206206 items: FirebaseListObservable< any[]> ;
207207
208- constructor(public navCtrl: NavController,af: AngularFire ) {
209- this.items = af.database .list(' /items' );
208+ constructor(public navCtrl: NavController, db: AngularFireDatabase ) {
209+ this.items = db .list(' /items' );
210210 }
211211
212212}
@@ -260,39 +260,39 @@ This should create the AuthService under `src/providers/auth-service.ts`.
260260Update the service with the following code.
261261
262262` ` ` bash
263-
263+ import { Observable } from ' rxjs/Observable ' ;
264264import { Injectable } from ' @angular/core' ;
265- import { AuthProviders, AngularFireAuth, FirebaseAuthState, AuthMethods } from ' angularfire2' ;
265+ import { AngularFireAuth } from ' angularfire2/auth' ;
266+ import { User } from ' firebase' ;
267+ import { FacebookAuthProvider } from ' firebase/auth' ;
266268
267269@Injectable ()
268270export class AuthService {
269- private authState: FirebaseAuthState;
271+ private authState: Observable< User> ;
272+ private currentUser: User;
270273
271- constructor(public auth $: AngularFireAuth) {
272- this.authState = auth$.getAuth() ;
273- auth $.subscribe((state: FirebaseAuthState ) => {
274- this.authState = state ;
274+ constructor(public afAuth $: AngularFireAuth) {
275+ this.authState = afAuth$.authState ;
276+ afAuth $.subscribe(( user : User ) => {
277+ this.currentUser = user ;
275278 });
276279 }
277280
278281 get authenticated(): boolean {
279- return this.authState !== null;
282+ return this.currentUser !== null;
280283 }
281284
282285 signInWithFacebook(): firebase.Promise<FirebaseAuthState> {
283- return this.auth$.login({
284- provider: AuthProviders.Facebook,
285- method: AuthMethods.Popup
286- });
286+ return this.afAuth$.auth.signInWithPopup(new FacebookAuthProvider()) ;
287287 }
288288
289289 signOut (): void {
290- this.auth$.logout ();
290+ this.afAuth$.signOut ();
291291 }
292292
293293 displayName (): string {
294- if (this.authState ! = null) {
295- return this.authState .facebook.displayName;
294+ if (this.currentUser ! = = null) {
295+ return this.currentUser .facebook.displayName;
296296 } else {
297297 return ' ' ;
298298 }
@@ -375,7 +375,7 @@ import { Component } from '@angular/core';
375375import { NavController } from ' ionic-angular' ;
376376
377377import { AuthService } from ' ../../providers/auth-service' ;
378- import { AngularFire , FirebaseListObservable } from ' angularfire2' ;
378+ import { AngularFireDatabase , FirebaseListObservable } from ' angularfire2/database ' ;
379379
380380@Component({
381381 selector: ' page-home' ,
@@ -385,8 +385,8 @@ export class HomePage {
385385
386386 items: FirebaseListObservable< any[]> ;
387387
388- constructor(public navCtrl: NavController,af: AngularFire, private _auth: AuthService) {
389- this.items = af.database .list(' /items' );
388+ constructor(public navCtrl: NavController, db: AngularFireDatabase, private _auth: AuthService) {
389+ this.items = db .list(' /items' );
390390 }
391391
392392 signInWithFacebook (): void {
@@ -467,51 +467,49 @@ and update the signInWithFacebook() method.
467467your ` ` ` auth-service.ts` ` ` code should look like this.
468468
469469` ` ` ts
470-
471-
470+ import { Observable } from ' rxjs/Observable' ;
472471import { Injectable } from ' @angular/core' ;
473- import { AuthProviders, AngularFireAuth, FirebaseAuthState, AuthMethods } from ' angularfire2' ;
474-
472+ import { AngularFireAuth } from ' angularfire2/auth' ;
473+ import { User } from ' firebase' ;
474+ import { FacebookAuthProvider } from ' firebase/auth' ;
475475import { Platform } from ' ionic-angular' ;
476476import { Facebook } from ' ionic-native' ;
477477
478478@Injectable ()
479479export class AuthService {
480- private authState: FirebaseAuthState;
480+ private authState: Observable< User> ;
481+ private currentUser: User;
481482
482- constructor(public auth $: AngularFireAuth, private platform: Platform ) {
483- this.authState = auth$.getAuth() ;
484- auth $.subscribe((state: FirebaseAuthState ) => {
485- this.authState = state ;
483+ constructor(public afAuth $: AngularFireAuth) {
484+ this.authState = afAuth$.authState ;
485+ afAuth $.subscribe(( user : User ) => {
486+ this.currentUser = user ;
486487 });
487488 }
488489
489490 get authenticated(): boolean {
490- return this.authState !== null;
491+ return this.currentUser !== null;
491492 }
492493
493494 signInWithFacebook(): firebase.Promise<FirebaseAuthState> {
494495 if (this.platform.is('cordova')) {
495496 return Facebook.login([' email' , ' public_profile' ]).then(res => {
496497 const facebookCredential = firebase.auth.FacebookAuthProvider.credential(res.authResponse.accessToken);
497- return firebase.auth() .signInWithCredential(facebookCredential);
498+ return this.afAuth$.aut .signInWithCredential(facebookCredential);
498499 });
499500 } else {
500- return this.auth$.login({
501- provider: AuthProviders.Facebook,
502- method: AuthMethods.Popup
503- });
501+ return this.afAuth$.auth.signInWithPopup(new FacebookAuthProvider ());
504502 }
505503
506504 }
507505
508506 signOut (): void {
509- this.auth$.logout ();
507+ this.afAuth$.signOut ();
510508 }
511509
512510 displayName (): string {
513- if (this.authState ! = null) {
514- return this.authState .facebook.displayName;
511+ if (this.currentUser ! = = null) {
512+ return this.currentUser .facebook.displayName;
515513 } else {
516514 return ' ' ;
517515 }
0 commit comments