Angular2 passing services to local component variable
<p>What I would like to do is have my variable <code>loggedIn</code> verify whether a user is logged in to my Angular2 Firebase app. So far nothing happens, and I do not get any errors. </p>

<p><code>authService</code> is entered correctly, so there are no errors there. I haven't included my constructors in the code for that reason.  </p>

<p><code>isuser</code> is a local variable in my nav.component, and I want my <code>isuser</code> value to be set to the service <code>isLogged</code> value.  </p>

<p>My <strong>auth.service.ts</strong>:</p>

<pre><code>import { Injectable, EventEmitter } from '@angular/core';
import { User } from './user.interface';

declare var firebase: any;

@Injectable()
export class AuthService {

public loggedIn = new EventEmitter&lt;boolean&gt;();

    signinUser(user: User){
        firebase.auth().signInWithEmailAndPassword(user.email, user.password)
        .catch(function(error){
            console.log(error);
        });
    }

    isLogged(showLog: boolean){this.loggedIn.emit(showLog);}
    logout(){firebase.auth().signOut();}

}
</code></pre>

<p>My <strong>app.component.ts</strong></p>

<pre><code>import { Component, OnInit } from '@angular/core';
import { AuthService } from './shared/auth.service';

declare var firebase: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {

constructor(private authService: AuthService){}

ngOnInit(){
    var self = this;
    var user = firebase.auth().currentUser;
    if (user){this.authService.isLogged(true);}
    else {this.authService.isLogged(false);}
}

}
</code></pre>

<p>My <strong>nav.component.ts</strong></p>

<pre><code>import { Component, OnInit } from '@angular/core';
import { AuthService } from '../shared/auth.service';
import { FormGroup, FormControl } from '@angular/forms';

declare var firebase: any;

@Component({
  selector: 'app-navigation',
  templateUrl: './navigation.component.html'
})
export class NavigationComponent implements OnInit {
    signInForm: FormGroup;
    private isuser: boolean;

  constructor(private authService: AuthService){
    this.signInForm = new FormGroup({
        'email': new FormControl(),
        'password': new FormControl()
    });
  }

  onSignup(){
    this.authService.signinUser(this.signInForm.value);
  }

  onLogout(){
    this.authService.logout();
  }

  ngOnInit(){
    var self = this;
    this.authService.loggedIn.subscribe(
    retuser =&gt; self.isuser = retuser);
  }

}
</code></pre>

<p>My <strong>navigation.component.html</strong></p>

<pre><code>&lt;div id="signIn" *ngIf="!isuser"&gt;
    &lt;form [formGroup]="signInForm" (ngSubmit)="onSignup()" class="form-inline"&gt;
        &lt;input type="text" class="form-control" placeholder="email" formControlName="email" /&gt;
        &lt;input type="password" class="form-control" placeholder="password" formControlName="password" /&gt;
        &lt;button class="btn btn-info"&gt;Sign In&lt;/button&gt;
    &lt;/form&gt;
&lt;/div&gt;

&lt;div id="signedIn" *ngIf="isuser"&gt;
    &lt;p&gt;Welcome dude&lt;/p&gt;
    &lt;p&gt;View Profile&lt;/p&gt;
    &lt;p (click)="onLogout()"&gt;Log Out&lt;/p&gt;
&lt;/div&gt;
</code></pre>

<p>For further clarification, what I am trying to mimic is this following code:</p>

<pre><code>isAuthenticated(){
    var user = firebase.auth().currentUser;
    if (user){return true;}
    else {return false;}
}
</code></pre>

<p>I want code that operates the same way on my <strong>auth.service</strong>. Instead of using a function I want to use the Event Emitter. </p>