MEAN Cookbook

There's more...

Having a login screen is useful, but most web applications allow users to see their authenticated status and logout as well. Let's explore how we can leverage our new current user Observable to dynamically hide and show a login button in our main application's navigation.

First, we will need a way to check whether a user is authenticated or not. For the sake of simplicity, let's just add a new method to our /src/app/user.ts model to tell us for itself. We'll simply make the existence of an email address good enough to make the user authenticated:

export class User {  constructor(    public firstName: string = "",    public lastName: string = "",    public email: string = ""  ) {}  getName() { return this.firstName + ' ' + this.lastName; ...