Building a login dialog

At this point, you may be wondering why we need a Login dialog in our application. The answer is for application data security. In real life, all data access must be protected, and you are going to enable all kinds of security restrictions when you release your application into production. This is why we need to implement a login dialog and authenticate the session with the remote server.

Follow these steps to build a Login dialog:

1. Generate a login component scaffold by running the following command:

      ng g component login

2. In the src/app/app-routing.module.ts file, create a new Route with a /login URL that points to the Login Dialog component:

      // ...
      import { LoginComponent } from './login/login.component';

      const routes: Routes = [
        {
          path: 'login',
          component: LoginComponent
        }
...