title: How to display the value userName in home.component.html (Angular)
body: <p>How to display the value userName in home.component.html ?</p>
  
  <p>home/home.component.html:</p>
  
  <pre><code>&lt;p&gt;
  You are logged in!   {{ userName }}  
  &lt;/p&gt;
  </code></pre>
  
  <p>class HomeComponent home/home.component.ts:</p>
  
  <pre><code>import {AuthService} from './../auth/auth.service';
  import {Component, OnInit} from '@angular/core';
  import {FormGroup, FormBuilder, Validators} from '@angular/forms';
  import {User} from '../auth/user';
  
  @Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styles: []
  })
  export class HomeComponent implements OnInit {
  
    constructor(private _data: AuthService) {
    }
    ngOnInit() {
    }
  }
  </code></pre>
  
  <p>login/login.component.html:</p>
  
  <pre><code>&lt;form class="example-form" [formGroup]="form" (ngSubmit)="onSubmit()"&gt;
  
      User * &lt;input matInput formControlName="userName" required&gt;
      &lt;br /&gt;
      Password * &lt;input matInput type="password" formControlName="password" required&gt;                      
      &lt;br /&gt;   
      &lt;button mat-raised-button color="primary" type="submit"&gt;Login&lt;/button&gt;
  &lt;/form&gt; 
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <p>login/login.component.ts:</p>
  
  <pre><code>import {AuthService} from './../auth/auth.service';
  import {Component, OnInit} from '@angular/core';
  import {FormGroup, FormBuilder, Validators} from '@angular/forms';
  
  @Component({
    selector: 'app-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.css']
  })
  
  export class LoginComponent implements OnInit {
  
  form: FormGroup;
  private formSubmitAttempt: boolean;
  
  constructor(
    private fb: FormBuilder,
    private authService: AuthService
  ) {}
  
  ngOnInit() {
  
     this.form = this.fb.group({
        userName: ['', Validators.required],
        password: ['', Validators.required]
     });
  }
  
     onSubmit() {
       if (this.form.valid) {
         this.authService.login(this.form.value);
       }
       this.formSubmitAttempt = true;
      }
  }
  </code></pre>
  
  <p>app-routing.module.ts:</p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { Routes, RouterModule } from '@angular/router';
  import { AuthGuard } from './auth/auth.guard';
  import { LoginComponent } from './login/login.component';
  import { HomeComponent } from './home/home.component';
  
      const routes: Routes = [
          { path: '',
            component: HomeComponent,
            canActivate: [AuthGuard]
          },
          { path: 'login',
            component: LoginComponent
          },
          { path: '**',
            redirectTo: ''
          }
      ];
  
  
  @NgModule({
       imports: [RouterModule.forRoot(routes)],
       exports: [RouterModule]
  })
  export class AppRoutingModule { }
  </code></pre>
  
  <p>app.component.ts:</p>
  
  <pre><code>import { Component } from '@angular/core';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
  </code></pre>
  
  <p>}</p>
  
  <p>app.modules.ts:</p>
  
  <pre><code>import {BrowserModule} from '@angular/platform-browser';
  import {NgModule} from '@angular/core';
  import {AppRoutingModule} from './app-routing.module';
  import {ReactiveFormsModule} from '@angular/forms';
  import {AppComponent} from './app.component';
  import {HomeComponent} from './home/home.component';
  import {LoginComponent} from './login/login.component';
  import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
  import {AppMaterialModule} from './app-material/app-material.module';
  import {FormsModule} from '@angular/forms';
  import {AuthService} from './auth/auth.service';
  import {AuthGuard} from './auth/auth.guard';
  import './rxjs-operators';
  
   @NgModule({
     declarations: [
       AppComponent,      
       HomeComponent, 
       LoginComponent     
     ],
    imports: [
       BrowserModule,
       AppRoutingModule,
       ReactiveFormsModule,
       BrowserAnimationsModule,
       AppMaterialModule,
       FormsModule  
    ],
    providers: [AuthService, AuthGuard],
    bootstrap: [AppComponent]
  })
  export class AppModule {}
  </code></pre>
  
  <p>auth/auth.guard.ts:</p>
  
  <pre><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(['/login']);  // {4}
         return false;
        }
        return true;
     });
   }
  }
  </code></pre>
  
  <p>auth/auth.service.ts:</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Router } from '@angular/router';
  import { BehaviorSubject } from 'rxjs/BehaviorSubject';
  import { User } from './user';
  
  @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(['/']);
    }
   }
   getUserName(user: User) {
     return user.userName;
   }
   logout() {                            // {4}
     this.loggedIn.next(false);
     this.router.navigate(['/login']);
   }
  
  }
  </code></pre>
  
  <p>auth/user.ts:</p>
  
  <pre><code>export interface User {
    userName: string;
    password: string;
  }
  </code></pre>
  
  <p>I am trying to get the getUserName method, but it does not work</p>