In this Angular 9 article, we’ll study to create attractive login and registration UI template with Angular Material 8. We’ll need the help of Material design components and Angular 8 flex design CDK to build the login and registration template. We’ll build an easy Angular 9 application from scratch and execute a login and registration UI module in it. You can review out below, how we’ll save a simple login and registration HTML form into a nice UI template.
Table of contents
- Prerequisite
- Setup Angular project
- Create components using Angular CLI
- Executing Angular Material 8
- Design Custom Angular Material Module
- Initialize Routing
- Build Angular Material Navbar
- Design Registration UI with Material Design
1). Prerequisite
Firstly, we’ll install
and configure an Angular project of new. I understand you’ve already installed
Node.js and Angular CLI in your system.
I did following command to
install Angular CLI:
npm install @angular/cli -g
2). Setup Angular Project
Enter command in terminal
and connected enter to build a new Angular 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
3). Create Components
Using Angular CLI
Components are a reusable
part of code in an Angular application. You can build components immediately
applying a single command. Run the command to generate login and registration
components in an Angular project.
ng g component
components/log-in --module app
ng g component
components/register --module app
4). Executing Angular
Material 8
Run the next command
to install Angular Material 8 UI library in Angular project:
ng add @angular/material
5). Design Custom Angular Material Module
It is always the most reliable method to build a
separate module files to import Angular Material components. It provides your code
to look extra appealing, Go to
src > app folder and generate angular-material.module.ts file and add the
following code:import { NgModule } from '@angular/core';import { CommonModule } from '@angular/common'; import { MatButtonModule, MatToolbarModule, MatIconModule, MatBadgeModule, MatSidenavModule, MatListModule, MatGridListModule, MatFormFieldModule, MatInputModule, MatSelectModule, MatRadioModule, MatDatepickerModule, MatNativeDateModule, MatChipsModule, MatTooltipModule, MatTableModule, MatPaginatorModule} from '@angular/material'; @NgModule({ imports: [ CommonModule, MatButtonModule, MatToolbarModule, MatIconModule, MatSidenavModule, MatBadgeModule, MatListModule, MatGridListModule, MatFormFieldModule, MatInputModule, MatSelectModule, MatRadioModule, MatDatepickerModule, MatNativeDateModule, MatChipsModule, MatTooltipModule, MatTableModule, MatPaginatorModule ], exports: [ MatButtonModule, MatToolbarModule, MatIconModule, MatSidenavModule, MatBadgeModule, MatListModule, MatGridListModule, MatInputModule, MatFormFieldModule, MatSelectModule, MatRadioModule, MatDatepickerModule, MatChipsModule, MatTooltipModule, MatTableModule, MatPaginatorModule ], providers: [ MatDatepickerModule, ]}) export class AngularMaterialModule { }
import it to
app.module.ts:/* Angular material */import { BrowserAnimationsModule } from '@angular/platform-browser/animations';import { AngularMaterialModule } from './angular-material.module';import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; @NgModule({ declarations: [...], imports: [ BrowserAnimationsModule, AngularMaterialModule, ], providers: [...], bootstrap: [...], schemas: [CUSTOM_ELEMENTS_SCHEMA]})export class AppModule { }
6). Initialize Routing
In this step, we’ll initialize
routing in our material design authentication UI template. Routing enables
users to go from one part to different components. To activate routing in
Angular app, we’ll explain the routing configuration in
app-routing.module.ts.import { NgModule } from '@angular/core';import { Routes, RouterModule } from '@angular/router';import { LogInComponent } from './components/log-in/log-in.component';import { RegisterComponent } from './components/register/register.component'; const routes: Routes = [ { path: '', pathMatch: 'full', redirectTo: 'login' }, { path: 'login', component: LogInComponent }, { path: 'register', component: RegisterComponent }]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule]})export class AppRoutingModule { }
7). Create Angular Material
Navbar
Now, we are building a navbar
applying the Angular Material UI library. First, include
<router-outlet></router-outlet> directive in app.component.ts. It displays the routed component on the front-end: <!-- Toolbar --><mat-toolbar color="primary" class="app-header"> <div><a href="https://www.positronx.io" target="_blank" class="positronx">PositronX.io</a></div> <span class="nav-tool-items"> <a mat-button routerLink="login" routerLinkActive="active">Log in</a> <a mat-button mat-raised-button routerLink="register" routerLinkActive="active">Register</a> </span></mat-toolbar><router-outlet></router-outlet>
