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 experience for users. 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 login component leverages the AuthService that we just created and implements validation errors using reactive forms.
Remember that in app.module.ts we provided AuthService using the class InMemoryAuthService. So, during run time, when AuthService is injected into the login component, the in-memory service will be the one in use.
The login component 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...