Toggling Menu Items

In this lesson, we'll toggle the menu items based on if the user is logged in or not.

We’ve updated the service to store the user’s current authentication status. It will always know if the user is logged in, even if we refresh the app. The service is injectable, meaning it can be used in any component that needs it.

Let’s use it to toggle the menu items in the header. It doesn’t make sense to show the login and register links if the user is already logged in. Let’s show them links to view the secret page or log out.

Injecting the service

The menu is rendered in the App component. We’ll need to inject the authentication service into it. Update the app.component.ts component class file to the following:

Get hands-on with 1200+ tech skills courses.