I've encountered an issue with fetching the current user logged into my application and displaying it in the header. I am using Angular 4 along with Firebase.
Initially, I was able to display the user information successfully. However, after making some changes, I'm struggling to resolve the issue.
The specific error message I'm receiving is:
Error Typeerror: cannot read property 'email' of undefined
Below are excerpts from my code:
<li class="nav-item dropdown" dropdown (onToggle)="toggled($event)">
<span>{{user?.profile.email}}</span>
My service for authentication includes:
import { Injectable } from '@angular/core';
import {AngularFire, FirebaseAuthState} from "angularfire2";
import {Observable, ReplaySubject} from "rxjs";
import {User} from "../users/user";
import {UserService} from "../users/user.service";
@Injectable()
export class AuthService {
// Code snippet for login, currentUser, and isAuthenticated functions.
In the User model file:
import {Profile} from "./profile";
import {Role} from "../roles/role";
export class User{
$key : string;
password:string;
confirmPassword: string;
profile: Profile;
role: Role;
}
And in the Profile model file:
export class Profile{
displayName : string;
email: string;
username: string;
}