Dynamic UI components and navigation
AuthService provides asynchronous auth status and user information, including a user’s name and role. We can use all this information to create a friendly and personalized user experience. In this next section, we will implement the LoginComponent so that users can enter their username and password information and attempt a login.
Implementing the login component
The LoginComponent leverages the AuthService we created and implements validation errors using reactive forms.
Remember that in app.config.ts, we provided AuthService using the class InMemoryAuthService. So, during runtime, when AuthService is injected into the LoginComponent, the in-memory service will be used.
The LoginComponent should be designed to be rendered independently of any other component because, during a routing event, if we discover that the user is not properly authenticated or authorized, we will navigate them to this component. We can...
