Given that the authentication may fail, let's provide some minimalistic error handling:

1. Update the login.component.html file with an extra h2 element under the dialog title:

      <h1>Login</h1>
      <h2 class="error" *ngIf="error">Error: {{ error }}</h2>

As you can see, we only display the h2 element if the error property value is provided for us.

2. We need the label to be red, so update the login.component.scss stylesheet with the corresponding color for the error class:

      .error {
          color: red;
      }

3. Finally, update the code of the login.component.ts file and provide an empty error property:

      // ...
      export class LoginComponent implements OnInit {
        error = '';
      
        // ...
      }

In the next section, we are going to address the result of successfully navigating and the Chat view that our users are going to be using. Let's build the placeholder component first and then add more content to it.