Angular 2 issue with my subscription

Question

My app.component

import { Component, OnInit } from '@angular/core';
import { AngularFire } from 'angularfire2';
import { Subscription } from 'rxjs/Subscription';
import { MainService } from './main.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
    private logsub: Subscription;
    private checking: string;
    constructor(private af: AngularFire, private mainService: MainService){}

    ngOnInit(){
        this.logsub = this.mainService.userThere$.subscribe(isUser => {
            if (isUser){
                firebase.auth().onAuthStateChanged(function(user){
                    if (user){
                        this.mainService.userLogged(true);
                        alert("True");
                    }
                    else {
                        this.mainService.userLogged(false);
                    }
                });
            }
        });

        if (this.mainService.userLogged){alert("Fish");}
    }

    ngOnDestroy(){
        this.logsub.unsubscribe();
    }
}

My main.services

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

@Injectable()
export class MainService {
    private userThere = new Subject<boolean>();
    userThere$ = this.userThere.asObservable();

    userLogged(isUser: boolean){
        this.userThere.next(isUser);
    }
}

What I am not understanding here is this. I have a user authorization code. If there is a user, I will get back an alert("True"). And I also set my userLogged subscription true.

When I load my page, I can confirm that there is no user. I do not get the alert("True");. However, below this I have included a test code if (this.mainService.userLogged){alert("Fish");}.

Despite there being no user, I am still being alerted of Fish.

Answer 1

The alert is being called as in the if block, you are checking whether the method userLogged exists on the service mainService

if (this.mainService.userLogged){alert("Fish");}

As the mainService is injected into your component( that is, instantiated and passed into the constructor of your component by the angular injector ), it will have all the methods you define in it. typescript classes are ultimately javascript constructor functions which when instantiated give you javascript objects. Those objects can have functions as properties, which as you may be aware are first class objects in JS.

So above in the if block when you check for this.mainService.userLogged you are getting a truthy value, as userLogged is defined in mainService. Hence it is going into the if block and alert is being fired.

EDIT :

Based on the comments what I gather is that you want to be able to write additional logic when user info reaches you via the mainService.userThere$ observer stream . We can have multiple call backs for a single observer stream. That is all of the call backs you register with the observer stream will be called when the observer source is triggered. So you can do this :

ngOnInit(){
    this.logsub = this.mainService.userThere$.subscribe(isUser => {
        if (isUser){
            firebase.auth().onAuthStateChanged(function(user){
                if (user){
                    //this.mainService.userLogged(true);
                    alert("True");
                    // no need to set userLogged true or false again 
                }
                else {
                    //this.mainService.userLogged(false);
                }
            });
        }
    });

//if (this.mainService.userLogged){alert("Fish");}
// instead of above do this
this.mainService.userThere$.subscribe( isUser => {
    alert("Fish");
    // We can attach as many functions as we want to the
    // observer stream. So all you have to do is simply pass
    // userThere$ observer stream in any component you want to
    // write the additional logic
})



 }

Hope this helps