Designing and Adding Forms to our Login Page

Login page design

The Login page is for users who have already registered and want to sign in to the dashboard. Once the user enters the correct details in the Login form, they’ll navigate directly to the application’s dashboard.

We can begin the design for the Login page by following the steps below:

Step 1: Generate the login component

To begin the design for the Login page, we need to generate a new component. The login component will be inside of a folder called components.

We can do this using the Angular CLI by running the command below:

ng generate component components/login

Our folder structure should look like this:

src > app > components > login

Inside of the login folder, we have the following files generated by the Angular CLI:

• login.component.css
• login.component.html
• login.component.spec.ts
• login.component.ts

Note: Click the terminal window below to see this in action.