title: Logout Still Shows Sidebar and Header in Angular 4
body: <p>I'm trying to create a admin dashboard. First, you will be redirected to the login screen, after successfully logging in, you will see the admin dashboard. The problem relies after i click the logout button on the header, I can see the sidebar and header? I should be redirected to the login screen alone. Any help on how to structure or how to address this? </p>
  
  <blockquote>
    <p>app.component.html</p>
  </blockquote>
  
  <pre><code>&lt;ng-template [ngIf]="authService.isLoggedIn()"&gt;
  &lt;app-header&gt;&lt;/app-header&gt;
  &lt;app-sidebar&gt;&lt;/app-sidebar&gt;  
  &lt;/ng-template&gt;
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <blockquote>
    <p>app.component.ts</p>
  </blockquote>
  
  <pre><code>import{ NgModule } from '@angular/core';
  import { Routes, RouterModule, PreloadAllModules } from '@angular/router';
  import { DashboardComponent } from './dashboard/dashboard.component';
  import { SigninComponent } from './auth/signin/signin.component';
  import { AuthGuard } from './auth/auth-guard.service';
  
  const appRoutes: Routes = [
      { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
      { path: 'signin', component: SigninComponent },
      { path: 'users', loadChildren: './user/user.module#UserModule', canActivate: [AuthGuard]},
      { path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard]},
  ];
  
  
  @NgModule({
      imports: [RouterModule.forRoot(appRoutes, {preloadingStrategy: PreloadAllModules})
      ],
  
      exports: [RouterModule]
  })
  
  export class AppRoutingModule {
  
  }
  </code></pre>
  
  <blockquote>
    <p>header.component.html</p>
  </blockquote>
  
  <pre><code>&lt;nav class="navbar"&gt;
    &lt;div class="container-fluid"&gt;
      &lt;div class="navbar-header"&gt;
        &lt;a routerLink="/" class="navbar-brand"&gt;Admin Dashboard&lt;/a&gt;
      &lt;/div&gt;
      &lt;button class="btn btn-danger" style="cursor: pointer;" (click)="onSignOut()"&gt;Logout&lt;/button&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  &lt;br&gt;
  </code></pre>
  
  <blockquote>
    <p>header.component.ts</p>
  </blockquote>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { AuthService } from '../../auth/auth.service';
  import { Router, ActivatedRoute } from '@angular/router';
  
  @Component({
    selector: 'app-header',
    templateUrl: './header.component.html',
    styleUrls: ['./header.component.css']
  })
  export class HeaderComponent implements OnInit {
    constructor(private authService: AuthService,
                private route: ActivatedRoute,
                private router: Router) { }
  
    ngOnInit() {
    }
  
    onSignOut(){
        this.authService.logout();
        this.router.navigate(['/signin']);
  
    }
  }
  </code></pre>
  
  <blockquote>
    <p>auth.service.ts</p>
  </blockquote>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Http, Headers, Response } from '@angular/http';
  import 'rxjs/add/operator/map';
  
  
  @Injectable()
  export class AuthService {
    private loggedIn = false;
  
    constructor(private http: Http) {
      this.loggedIn = !!localStorage.getItem('auth_token');
    }
  
    signinUser(email: string, password: string) {  
      let headers = new Headers();
      headers.append('Content-Type', 'application/json');
  
      return this.http
      .post(
        'http://sample/auth/login', 
        JSON.stringify({ email, password }), 
        { headers }
        )
      .map(
          response =&gt; {
            localStorage.setItem('auth_token', response.json().id_token);
            this.loggedIn = true;
            console.log(response);
          },
          error =&gt; {
            alert(error.text());
            console.log(error.text());
          }
        );
  
     }
  
     isLoggedIn() {
      return this.loggedIn;
    }
  
     logout() {
          // remove user from local storage to log user out
          localStorage.removeItem('auth_token');
      }
  }
  </code></pre>