In the recent past, I was working on the Angular application. I was implementing that application using Angular Material, So I felt like sharing a small piece of it. In this Post, I will show how to create a login template usingAngular Material. Throughout this tutorial, Angular means Angular version greater than 2.x unless stated otherwise. Okay, so let’s get to digging and get our hands dirty.
Alright, but before going ahead let’s take a look at the final outcome of this application.
Setting up our Application
Let’s use Angular CLI to setup our application. If you don’t have Angular CLI installed on your machine run the below command to install it globally.npm install -g angular-cli
After Angular CLI installation, to create a new Angular project Run below command. This command will create all the necessary files, download all the required external dependencies and do all of the setup work for us.
ng new AppName
Installing the Angular Material
Wait, before installing the Angular material. You need to install@angular/animationsdependency if you haven’t already. To install the @angular/animations dependency run the below command.npm install --save @angular/animations
Done ? let’s go ahead and install the Angular Material , Run the below command.npm install --save @angular/material @angular/cdk
Setting up the theme of Angular Material
I assume, now you have installed all the required dependencies now let’s include the theme into the Angular application. This is required to apply all of the core and theme styles to your application.
You can include the theme via two ways first is usingstyle.cssor using<link>element in yourindex.html. Let’s take a look at each way one by one.
Usingstyle.css, In your CSS file using can directly include the theme style.
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
If you are usingindex.html, you can use the <link> element as shown below,
<link href="node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">
If you completed the above steps successfully then are ready to Angular Material.
Using Login template using Angular Material
1.First, let’s take a look at app.module.ts because in this application I will be importing a lot of Angular Material Elements such as MdButtonModule, MdCheckboxModule, MdGridListModule, MdInputModule and MdIconModule. Below code is pretty easy to understand, so I won’t talk much about it.
app.module.ts:
/*
Login template using Angular Material
@author Shashank Tiwari
*/
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MdButtonModule, MdCheckboxModule,MdGridListModule,MdInputModule,MdIconModule} from '@angular/material';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
MdButtonModule,
MdCheckboxModule,
MdGridListModule,
MdInputModule,
MdIconModule,
BrowserAnimationsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }2. Adding themes and Icons
Now I will add Material Icons library also I will add the theme to our Application. Here I will useindex.htmlfor these tasks. Let’s take a look below code.
index.html:
<!-- Login template using Angular Material @author Shashank Tiwari --> <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Materialtest</title> <base href="/"> <link href="https://unpkg.com/@angular/material@2.0.0-beta.8/prebuilt-themes/deeppurple-amber.css" rel="stylesheet"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> </head> <body> <app-root></app-root> </body> </html>
3. Using the Material Elements
In this section, We will use the Material Elements to implement the logic template. So open theapp.component.htmland write down below code.
app.component.html:
<!--
Login template using Angular Material
@author Shashank Tiwari
-->
<!-- Application header starts -->
<div class="app-header">
<h1 class="app-heading">{{title}}</h1>
</div>
<!-- Application header ends -->
<md-grid-list cols="3">
<md-grid-tile></md-grid-tile>
<!-- Writing markup for login starts -->
<md-grid-tile class='login-element'>
<div class="login-container">
<!-- Template Header starts -->
<div class="login-box-header">
<img src="https://codershood.info/wp-content/uploads/2015/12/codershood.info-logo1.png">
</div>
<!-- Template Header ends -->
<!-- Template Body starts -->
<div class="login-box-body">
<!-- Markup for getting Username starts -->
<md-grid-list cols="9" rowHeight="75px">
<md-grid-tile [rowspan]="1" class="login-icon">
<md-icon>lock</md-icon>
</md-grid-tile>
<md-grid-tile [colspan]="7">
<md-input-container class="justifier">
<input mdInput placeholder="Username" text="text">
</md-input-container>
</md-grid-tile>
</md-grid-list>
<!-- Markup for getting Username ends -->
<!-- Markup for getting Password starts -->
<md-grid-list cols="9" rowHeight="100px">
<md-grid-tile [rowspan]="1" class="login-icon">
<md-icon>remove_red_eye</md-icon>
</md-grid-tile>
<md-grid-tile [colspan]="7">
<md-input-container class="justifier">
<input mdInput placeholder="Password" text="password">
</md-input-container>
</md-grid-tile>
</md-grid-list>
<!-- Markup for getting Password ends -->
<button md-raised-button class="login-button">
<md-icon>input</md-icon> Login
</button>
</div>
<!-- Template Body ends -->
</div>
</md-grid-tile>
<!-- Writing markup for login ends -->
<md-grid-tile></md-grid-tile>
</md-grid-list>Explanation:
1. In the above code, I have used the<md-grid-list></md-grid-list>element and<md-grid-tile></md-grid-tile>in order to implement the Grids.
2. Here we are using<md-icon></md-icon>to put Material icons in our web page.
3. <md-input-container> is wrapper for input and text area elements. read the below, from the Docs.
<md-input-container>is a wrapper for nativeinputandtextareaelements. This container applies Material Design styles and behavior while still allowing direct access to the underlying native element.The native element wrapped by the
md-input-containermust be marked with themdInputdirective.
4. To add the Material look and feel to our input, we will add the mdInput attribute as shown below.
<input mdInput placeholder="Password" text="password">
4. Adding some more styles
On top of Material elements, you can always add more styles to make your page look good and clean. I have used the style.css file to add few styles have a look below,
style.css:
/*
Login template using Angular Material
@author Shashank Tiwari
*/
body{
background-color: #e91e63;
font-family: 'Roboto', sans-serif;
margin:0px !important;
}
.app-header{
color: #fff;
background-color: #e91e63;
text-align: center;
padding: 1%;
-webkit-box-shadow: 2px 4px 58px -20px rgba(0,0,0,1);
-moz-box-shadow: 2px 4px 58px -20px rgba(0,0,0,1);
box-shadow: 2px 4px 58px -20px rgba(0,0,0,1);
}
.login-container{
width: 100%;
height:400px;
padding: 0% !important;
background-color: #fff;
-webkit-box-shadow: 2px 4px 58px -20px rgba(0,0,0,1);
-moz-box-shadow: 2px 4px 58px -20px rgba(0,0,0,1);
box-shadow: 2px 4px 58px -20px rgba(0,0,0,1);
}
.login-box-header{
width: auto;
height: 20%;
background-color: #673ab7;
text-align: center;
vertical-align: middle;
font-size: 3em;
padding: 2%;
color: #fff;
}
.login-box-body{
width: auto;
height:100%;
padding: 5% 5% 5% 5%;
color: #d2d2d2;
}
.login-icon{
margin-top: -2px;
}
.justifier {
width: 100%;
padding-bottom: 2%;
}
.login-button{
width: 100%;
padding:1.5% !important;
background-color: #673ab7;
font-size: 1.5em;
color: #fff !important;
}Yeah, that’s it for the simple login page. Material design can really add a fresh look and feel to your application If you haven’t used it yet give it a chance. Also, you can give your thoughts or improvements on this article in the below comment box.
I’m Getting this Error.Please have a look.
Error : mat-grid-list: tile with colspan 7 is wider than grid with cols=”3″
Hi,
This article needs an update, meanwhile, you can use this Github repo https://github.com/ShankyTiwari/Angular-material-login-template. This version is created using Angular 6
did you find solution?