After successfully login, we want something help to check whether user has already login or not. And we will use Observable to do that.

Create AuthInfo.ts:

export class AuthInfo {
constructor(private uid$: string){

}

isLoggedIn() {
return !!this.uid$;
}
}

The class is very simple, accpets an uid which return from FirebaseAuth, and a method to check whether id is set already.

TO user Observable to handle the data:

AuthService.ts:

static UNKNOW_USER = new AuthInfo(null); // Create a default unknow user
public authInfo$: BehaviorSubject = new BehaviorSubject(AuthService.UNKNOW_USER); // We user BehaviorSubject to to conver to Observable, Behavior Subject already needs a default value, so we can repersent logout status by using default value

login(email, password) {

return this.fromFirebaseAuthPromise(this.auth$.login({  
  email, password  
},{  
  method: AuthMethods.Password,  
  provider: AuthProviders.Password  
}));  

}

fromFirebaseAuthPromise(promise) {
const subject = new Subject();

promise.then((res) => {  
  const uid = this.auth$.getAuth().uid;  
  const authInfo = new AuthInfo(uid);  
  this.authInfo$.next(authInfo);  
  subject.next(res);  
  subject.complete();  
}, err => {  
  this.authInfo$.error(err);  
  subject.error(err);  
  subject.complete();  
});

return subject.asObservable();  

}

Everytime,we successfully login, will emit a uid.

So to show / hide show content based on 'authInfo$', we can do:

  <md-list-item>  
    <a  
      \*ngIf="authInfo$.isLoggedIn()"  
      \[routerLink\]="\['/heros', {outlets: {'wiki': null}}\]"  
      routerLinkActive="active"  
      \[routerLinkActiveOptions\]="{exact: true}"  
    >Heros</a>  
  </md-list-item>

authInfo$;
constructor(private auth: AuthService){
this.auth.authInfo$.subscribe(
res => {
this.authInfo$ = res;
}
)
}