Login template using Angular Material

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 using Angular 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.




 

     Download

Alright, but before going ahead let’s take a look at the final outcome of this application.Login template using Angular Material login page

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/animations dependency 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 using style.css or using <link> element in your index.html. Let’s take a look at each way one by one.

Using style.css, In your CSS file using can directly include the theme style.

If you are using index.html, you can use the <link> element as shown below,

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:

2. Adding themes and Icons

Now I will add Material Icons library also I will add the theme to our Application. Here I will use index.html for these tasks. Let’s take a look below code.

index.html:

3. Using the Material Elements

In this section, We will use the Material Elements to implement the logic template. So open the app.component.html and write down below code.

app.component.html:

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 native input and textarea elements. 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-container must be marked with the mdInput directive.

4. To add the Material look and feel to our input, we will add the mdInput attribute as shown below.

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:

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.