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.
Click below to check out the live demo:
You can also get the Git repo by clicking on the button below:
- Setup Angular 8 project
- Generate components using Angular CLI
- Implementing Angular Material 8
- Create Custom Angular Material Module
- Initialize Routing
- Create Angular Material Navbar
- Create Registration UI with Material Design
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
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:
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
--module app tag makes the
app.module.ts is the main app module file.
Run the following command to install Angular Material 8 UI library in Angular project: