Create Login UI Template with Angular 8 and Material Design

In this Angular 8 tutorial, we’ll learn to build beautiful login and registration UI (user interface) template with Angular Material 8. We’ll take help of Material design components and Angular 8 flex layout CDK to create the login and registration template. We’ll create a simple Angular 8 application from scratch and implement a login and registration UI module in it. You can check out below, how we’ll convert a simple login and registration HTML form into a beautiful UI template.

Material Design Login and Register UI Template Demo

Click below to check out the live demo:

Log in UI Demo

You can also get the Git repo by clicking on the button below:

GitHub Repo

Table of contents

1. Prerequisite
2. Setup Angular 8 project
3. Generate components using Angular CLI
4. Implementing Angular Material 8
5. Create Custom Angular Material Module
6. Initialize Routing
7. Create Angular Material Navbar
8. Create Registration UI with Material Design
9. Conclusion

Prerequisite

Firstly, we’ll install and configure an Angular 8 project from scratch. I assume you’ve already installed Node.js and Angular CLI in your system. If not follow this tutorial: Install Node JS on Mac OS

I used below command to install Angular CLI:

npm install @angular/cli -g

Setup Angular 8 Project

Enter command in terminal and hit enter to create a fresh Angular 8 project.

ng new angular-material-login-template

# ? Would you like to add Angular routing? = Yes
# ? Which stylesheet format would you like to use? = CSS

Get into the project folder:

cd angular-material-login-template

Generate Components Using Angular CLI

Components are a reusable piece of code in an Angular application. You can create components quickly using a single command. Run the command to create login and registration components in an Angular 8 project.

ng g component components/log-in --module app

ng g component components/register --module app

The --module app tag makes the app.module.ts is the main app module file.

Implementing Angular Material 8

Run the following command to install Angular Material 8 UI library in Angular project:

Click here to read more