title: How to hide header component on login page in Angular 4?
body: <p>I am very new to angular 4 and angular material and i am still at learning phase.
  I am trying to create an app where user logs in and navigates to dashboard.
  Now i am showing a header component in dashboard and hiding it in login page.
  But when i refresh the browser on dashboard the header component doesnt loads.
  I used <a href="https://loiane.com/2017/08/angular-hide-navbar-login-page/" rel="nofollow noreferrer">This Tutorial to create the PoC</a></p>
  <p>Now i am not able to figure out the solution.Any help would be appreciated.
  Thanks in Advance...!!!</p>
  <p>Please find my code below</p>
  <p><strong>app.module.ts</strong></p>
  <pre class="lang-js prettyprint-override"><code>        import { BrowserModule } from '@angular/platform-browser';
          import { NgModule } from '@angular/core';
          import { HttpClientModule, HttpClient } from '@angular/common/http';
          import { HttpModule } from '@angular/http';
          import { RouterModule, Routes } from '@angular/router';
          import 'hammerjs';
          import { NgxPhoneSelectModule } from 'ngx-phone-select';
          import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
          import { FormsModule, ReactiveFormsModule } from '@angular/forms';
          import { MatInputModule, MatButtonModule, MatSelectModule } from '@angular/material';
          import { MatGridListModule } from '@angular/material';
          import { MatTableModule } from '@angular/material';
          import { MaterialModule } from './modules/material/material.module';
  
  
          import { AppComponent } from './app.component';
          import { CustomerComponent } from './components/customer/customer.component';
          import { LoginComponent } from './components/login/login.component';
          import { ForgetPasswordComponent } from './components/forget-password/forget-password.component';
          import { PageNotFoundComponent } from './components/page-not-found/page-not-found.component';
          import { DashboardComponent } from './components/dashboard/dashboard.component';
  
          import { FleetDataService } from './services/fleet-data.service';
          import { LoaderService } from './services/loader.service';
          import { HeaderComponent } from './components/header/header.component';
          import { AuthService } from './services/auth.service';
          import { AuthGuard } from './services/auth.guard';
          const appRoutes: Routes = [
            {
              path: '',
              component: LoginComponent
            },
            {
              path: 'create-customer',
              component: CustomerComponent,
              //        canActivate: [AuthGuard] // ristrict direct access of links
            },
            {
              path: 'forget-password',
              component: ForgetPasswordComponent,
              //        canActivate: [AuthGuard] // ristrict direct access of links
            },
            {
              path: 'dashboard',
              component: DashboardComponent,
                        canActivate: [AuthGuard] // ristrict direct access of links
            },
            {
              path: '**',
              component: PageNotFoundComponent
            }
          ];
  
          @NgModule({
            declarations: [
              AppComponent,
              CustomerComponent,
              LoginComponent,
              ForgetPasswordComponent,
              PageNotFoundComponent,
              DashboardComponent,
              HeaderComponent
            ],
            imports: [
              BrowserModule,
              HttpClientModule,
              HttpModule,
              RouterModule.forRoot(appRoutes),
              NgxPhoneSelectModule,
              BrowserAnimationsModule,
              FormsModule,
              ReactiveFormsModule,
              MatInputModule,
              MatButtonModule,
              MatSelectModule,
              MatGridListModule,
              MatTableModule,
              MaterialModule
            ],
            providers: [FleetDataService, LoaderService, AuthService, AuthGuard],
            bootstrap: [AppComponent]
          })
          export class AppModule { }
  
  **app.component.ts**
  
          import { Component } from '@angular/core';
  
          @Component({
            selector: 'app-root',
            templateUrl: './app.component.html',
            styleUrls: ['./app.component.scss']
          })
          export class AppComponent {
            title = 'app';
          }
  </code></pre>
  <p><strong>app.component.html</strong></p>
  <pre class="lang-html prettyprint-override"><code>        &lt;div id=&quot;fullPage&quot;&gt;
            &lt;app-header &gt;&lt;/app-header&gt;
            &lt;router-outlet&gt;&lt;/router-outlet&gt;
          &lt;/div&gt;
  **login.component.html**
  
          &lt;div class=&quot;fstBg container-fluid&quot;&gt;
            &lt;div class=&quot;row&quot;&gt;
            &lt;div class=&quot;col-md-12 logo pull-right&quot;&gt;&lt;/div&gt;
              &lt;div class=&quot;col-md-4&quot;&gt;&amp;nbsp;&lt;/div&gt;
              &lt;div class=&quot;col-md-4&quot;&gt;
                &lt;form [formGroup]=&quot;form&quot; (ngSubmit)=&quot;onSubmit()&quot;&gt;
                  &lt;div class=&quot;example-container&quot;&gt;
                    &lt;mat-input-container&gt;
                      &lt;input matInput placeholder=&quot;Username&quot; formControlName=&quot;userName&quot; required&gt;
                      &lt;mat-error *ngIf=&quot;isFieldInvalid('userName')&quot;&gt;
                        User name cannot be empty
                      &lt;/mat-error&gt;
                    &lt;/mat-input-container&gt;
                    &lt;mat-input-container&gt;
                      &lt;input matInput type=&quot;password&quot; placeholder=&quot;Password&quot; formControlName=&quot;password&quot; required&gt;
                      &lt;mat-icon matSuffix (click)=&quot;hide = !hide&quot; ngClass=&quot;{{hide ? 'glyphicon glyphicon-eye-open' : 'glyphicon glyphicon-eye-close'}}&quot;&gt;&lt;/mat-icon&gt;
                      &lt;mat-error *ngIf=&quot;isFieldInvalid('userName')&quot;&gt;
                        Password cannot be empty
                      &lt;/mat-error&gt;
                    &lt;/mat-input-container&gt;
                    &lt;br /&gt;&lt;br /&gt;
                    &lt;button type=&quot;submit&quot; class=&quot;btn col-md-12  orange_btn&quot; mat-raised-button&gt;Login&lt;/button&gt;
                    
                    &lt;div class=&quot;bottom-div col-md-12 text-right pd0&quot;&gt;       
                      &lt;a id=&quot;button_right&quot; routerLink=&quot;forget-password&quot; class=&quot;white_text hover_link link&quot;&gt;Forget Password&lt;/a&gt;
                    &lt;/div&gt;
                    &lt;br&gt;&lt;br&gt;
                  &lt;/div&gt;
                &lt;/form&gt;
                &lt;/div&gt;
              &lt;div class=&quot;col-md-4&quot;&gt;&amp;nbsp;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  <p><strong>login.component.ts</strong></p>
  <pre class="lang-js prettyprint-override"><code>        import { Component, OnInit } from '@angular/core';
          import { FormGroup, FormBuilder, Validators } from '@angular/forms';
          // import { Router } from '@angular/router';
          // import { User } from '../../models/login.interface';
          import { AuthService } from '../../services/auth.service';
  
          @Component({
            selector: 'app-login',
            templateUrl: './login.component.html',
            styleUrls: ['./login.component.scss']
          })
          export class LoginComponent implements OnInit {
            form: FormGroup;
            private formSubmitAttempt: boolean;
            constructor(private fb: FormBuilder,
              private authService: AuthService) {}
            ngOnInit() {
              this.form = this.fb.group({     // {5}
                userName: ['', Validators.required],
                password: ['', Validators.required]
              });
            }
            isFieldInvalid(field: string) {  // {6}
              return (
                (!this.form.get(field).valid &amp;&amp; this.form.get(field).touched) ||
                (this.form.get(field).untouched &amp;&amp; this.formSubmitAttempt)
              );
            }
            onSubmit() {
              if (this.form.valid) {
                this.authService.login(this.form.value); // {7}
              }
              this.formSubmitAttempt = true;
            }
          }
  </code></pre>
  <p><strong>header.component.html</strong></p>
  <pre class="lang-html prettyprint-override"><code>        &lt;div class=&quot;row mrg0 hidden-xs&quot; *ngIf=&quot;isLoggedIn$ | async as isLoggedIn&quot;&gt;
            &lt;div class=&quot;col-md-8 col-lg-8 col-sm-8&quot;&gt;
              &lt;div class=&quot;logo_div&quot;&gt;
                &lt;div class=&quot;logo&quot; routerLink=&quot;user-management&quot;&gt;&lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;col-md-4 col-lg-4 col-sm-4 right_panel&quot;&gt;
              &lt;div class=&quot;row mrg0&quot;&gt;
                &lt;div class=&quot;col-md-6 col-lg-8 col-sm-6 text-right pd0 user_name&quot;&gt;&lt;i class=&quot;material-icons gray_icon user_name&quot;&gt;person&lt;/i&gt; &lt;span&gt;Hello Admin&lt;/span&gt;&lt;/div&gt;    
                &lt;div class=&quot;col-md-4 col-lg-4 col-sm-4 logout link&quot; (click)=&quot;onLogout()&quot; *ngIf=&quot;isLoggedIn&quot;&gt;&lt;a&gt;&lt;i class=&quot;material-icons gray_icon clickable&quot; matTooltip=&quot;Logout&quot;&gt;exit_to_app&lt;/i&gt;&amp;nbsp;&lt;span&gt;Logout&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  <p><strong>header.component.ts</strong></p>
  <pre class="lang-js prettyprint-override"><code>        import { Component, OnInit } from '@angular/core';
          import { Observable } from 'rxjs/Observable';
          import { AuthService } from '../../services/auth.service';
          @Component({
            selector: 'app-header',
            templateUrl: './header.component.html',
            styleUrls: ['./header.component.scss']
          })
          export class HeaderComponent implements OnInit {
            isLoggedIn$: Observable&lt;boolean&gt;;
            constructor(private authService: AuthService) { }
  
            ngOnInit() {
              this.isLoggedIn$ = this.authService.isLoggedIn; // {2}
            }
            onLogout() {
              this.authService.logout();                      // {3}
            }
  
          }
  </code></pre>
  <p><strong>dashboard.component.ts</strong></p>
  <pre class="lang-js prettyprint-override"><code>    import { Component } from '@angular/core';
  
      @Component({
        selector: 'app-dashboard',
        template: '&lt;p&gt;Yay! You are logged in!&lt;/p&gt;',
        styles: []
      })
      export class DashBoardComponent {}
  </code></pre>
  <p><strong>auth.guard</strong></p>
  <pre class="lang-js prettyprint-override"><code>        import { Injectable } from '@angular/core';
          import {
            CanActivate,
            ActivatedRouteSnapshot,
            RouterStateSnapshot,
            Router
          } from '@angular/router';
          import { AuthService } from './auth.service';
          import { Observable } from 'rxjs/Observable';
          import 'rxjs/add/operator/take';
          import 'rxjs/add/operator/map';
  
          @Injectable()
          export class AuthGuard implements CanActivate {
            constructor(
              private authService: AuthService,
              private router: Router
            ) {}
  
            canActivate(
              next: ActivatedRouteSnapshot,
              state: RouterStateSnapshot
            ): Observable&lt;boolean&gt; {
              return this.authService.isLoggedIn       // {1}
                .take(1)                               // {2}
                .map((isLoggedIn: boolean) =&gt; {        // {3}
                  if (!isLoggedIn) {
                    this.router.navigate(['']);  // {4}
                    return false;
                  }
                  return true;
                });
            }
          }
  </code></pre>
  <p><strong>auth.service</strong></p>
  <pre class="lang-js prettyprint-override"><code>        import { Injectable } from '@angular/core';
          import { Router } from '@angular/router';
          import { BehaviorSubject } from 'rxjs/BehaviorSubject';
          import { User } from '../models/login.interface';
  
          @Injectable()
          export class AuthService {
            private loggedIn = new BehaviorSubject&lt;boolean&gt;(false); // {1}
  
            get isLoggedIn() {
              return this.loggedIn.asObservable(); // {2}
            }
  
            constructor(
              private router: Router
            ) {}
  
            login(user: User) {
              if (user.userName !== '' &amp;&amp; user.password !== '' ) { // {3}
                this.loggedIn.next(true);
                this.router.navigate(['/dashboard']);
              }
            }
  
            logout() {                            // {4}
              this.loggedIn.next(false);
              this.router.navigate(['']);
            }
          }
  </code></pre>
  <p><strong>login.interface.ts</strong></p>
  <pre class="lang-js prettyprint-override"><code>       export interface User {
         userName: string;
         password: string;
        }
  </code></pre>