Vfrdtyky

I just want to display the email of this logged in user in the header

Here is my AuthService:

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

import { HttpClient, HttpHeaders } from '@angular/common/http';

import { Observable } from 'rxjs';

import { map } from 'rxjs/operators';

import { User } from '../interfaces/user';



export interface Form {

  email: string;

  password: string;

}



@Injectable({

  providedIn: 'root'

})

export class AuthService {



  constructor(private http: HttpClient) { }



  login(login): Observable<boolean> {

    return this.http.post<{ token: string }>(

      'https://megaphone-test.herokuapp.com/api/auth/login',

      login)

      .pipe(

        map(result => {

          localStorage.setItem('access_token', result.token);

          return true;

        })

      );

  }



  getUser(): Observable<User> {

    const token = localStorage.getItem('access_token');

    return this.http.get<User>(

      'https://megaphone-test.herokuapp.com/api/user',

      {

        headers: new HttpHeaders().append('x-access-token', token)

      });

  }



  isAdmin() {

    const token = localStorage.getItem('access_token');

    return this.http.get<User>(

      'https://megaphone-test.herokuapp.com/api/user/isAdmin',

      {

        headers: new HttpHeaders().set('x-access-token', token)

      }

    )

      .subscribe(

        res => console.log(res['isAdmin']),

        err => console.log(err)

      );

  }



  logout() {

    localStorage.removeItem('access_token');

  }



  public get loggedIn(): boolean {

    return (localStorage.getItem('access_token') !== null);

  }



}

Here is my Component:

import { Component, OnInit, Input } from '@angular/core';

import { AuthService } from '../../core/services/auth.service';

import { Router } from '@angular/router';

import { Observable } from 'rxjs';

import { User } from '../../core/interfaces/user';



@Component({

  selector: 'app-header',

  templateUrl: './header.component.html',

  styleUrls: ['./header.component.css']

})

export class HeaderComponent implements OnInit {



  user: User;



  constructor(public auth: AuthService, private router: Router) { }



  ngOnInit() {

    this.auth.getUser()

    .subscribe(

      user => this.user = user

    );

  }



  doLogout() {

    this.auth.logout();

    this.router.navigate(['login']);

  }



}

Here is my Template:

 <div class="header-actions" *ngIf="auth.loggedIn">

        <clr-dropdown>

            <button class="nav-text" clrDropdownTrigger>

                    {{ user.email }}

                <clr-icon shape="caret down"></clr-icon>

            </button>

            <clr-dropdown-menu *clrIfOpen clrPosition="bottom-right"> 

                <a href="..." clrDropdownItem>Preferences</a>

                <a clrDropdownItem (click)="doLogout()">Log out</a>

            </clr-dropdown-menu>

        </clr-dropdown>

    </div>

ERROR HeaderComponent.html:17 ERROR TypeError: Cannot read property 'email' of undefined

It seems no matter which way I code this it still never knows who the user is. I can console log it all day and it shows this logged in user no problems.

Cheers,

 ngOnInit() {

    this.auth.getUser()

    .subscribe(

      user => this.user = user['user']

    );

  }

On the component init

 getUser(): Observable<User> {

    const token = localStorage.getItem('access_token');

    return this.http.get<User>(

      'https://megaphone-test.herokuapp.com/api/user',

      {

        headers: new HttpHeaders().append('x-access-token', token)

      }

    );

  }