Table of Contents
Utilizing the exquisite benefits of Angular Material Design in building a web page will be the best thing you should try out to make a lucrative web page or application. If you’re new to this term then this could be the better guide for you to understand & build a complete web page using Angular Material Design.
Is Angular Material Design?
It contains various UI components, such as:
- form controls (input, select, checkbox, date picker, and sliders, etc.),
- navigation patterns (menus, sidenav, and toolbar)
- layout components (grids, cards, tabs, and lists )
- buttons indicators (progress bars and spinners)
- popups and modals data tables with headers and pagination etc.
Features Of Angular Material Design
- Supports in-built responsive design.
- Provides new common user interface controls such as buttons, checkboxes, and text fields.
- Provides enhanced features like cards, toolbar, speed dial, side nav, swipe
Before building a login page, follow the below steps to set up the Angular application,
- Setup & install an angular application
- Integrating angular material design
- Integrating angular flex layout
Setup & Install Angular Application
In case if you have already installed “@angular/cli” package then you can directly use the following comment to create a new angular application.
ng new my-login-app
In case, if you haven’t installed “@angular/cli” then you can use the following code to install Angular CLI
npm install -g @angular/cli
After installation, you can start creating your new angular application & give the name you wish. So in our example, i have named “my-login-app”.
ng new my-login-app
During your app creation, it will ask you for the following details,
Would you like to add Angular routing?
If you want router in your application then Press “Y” and enter.
Which stylesheet format would you like to use?
To select the stylesheet format use arrow keys like less, CSS, sass and press enter.
Next, navigate to the create app folder using the below command,
cd my-login-app
Now run the application using the following command,
ng serve
After running the above command, you will get the live development URL of the application by default http://localhost:4200
Integrate Angular Material Design
Now your angular application will be ready, next, we will start by integrating the angular material using the following steps.
Install the Angular Material npm package using the following command,
npm install --save @angular/material @angular/cdk @angular/animations
Once the package got installed, import BrowserAnimationsModule into your application to enable animations support.
Open the app.module.ts module file and import the following code
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
@NgModule({
...
imports: [BrowserAnimationsModule],
...
})
export class AppModule { }
Now we require a theme to apply all the core and theme styles to the application,
So open styles.css file and add the below code to apply all the required theme style.
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
Once you’re done with adding the above style, you will get an Angular material theme.
Some of the angular material components rely on HammerJS link such as mat-slide-toggle, mat-slider, matTooltip. So In order to get the full feature-set of these components, you must install hammerJS.
you can use the below command to install hammerJS,
npm install --save hammerjs
After installing, you need to import hammerJS on your app’s entry point.
Navigate to src/main.ts file in your application folder and use the below code to import hammerJS,
import 'hammerjs';
Great guys! now you can see that your application will be successfully integrated with Angular Material.
For a quick Angular Material reference, you can see here.
Integrating Angular Flex layout
Angular Flex-Layout provides a flexible API layout using Flexbox CSS + mediaQuery. By integrating this, we can get the complete grid & element alignment support from Angular Flex-Layout.
So you can use the following npm command to install angular flex layout
npm install -save @angular/flex-layout
Next import the FlexLayoutModule to the app module file.
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { FlexLayoutModule } from ‘@angular/flex-layout’;
@NgModule({
...
imports: [
BrowserAnimationsModule,
FlexLayoutModule
],
...
})
export class AppModule { }
Finally, Angular application with the Angular material setup is done and now we’re ready to build the login page.
Related: Angular 4 Template Driven Forms : Building and Validating Forms
Create an Angular Login Form
First, navigate to app folder and create a login component using the following command,
cd <project path>/src/app ng generate component login
Or you can also use this,
ng g c login
After creating a login component, it will be automatically included in the app module file. In case if it’s not getting added then you can use the below code to add the component.
import { LoginComponent } from './login/login.component';
@NgModule({
declarations: [
LoginComponent
]
})
Next, enable the login path using router module and you use the below code in app-routing.module.ts
const routes: Routes = [
{
path: '',
component: LoginComponent
}
];
After enabling the router file, you will get the initial login page as follow.
Next, for designing the login page you must include the angular material ” Inbuilt module” in-app module file as follows,
import {
MatFormFieldModule,
MatInputModule,
MatCardModule,
MatButtonModule
} from '@angular/material';
@NgModule({
imports: [
MatFormFieldModule,
MatInputModule,
MatCardModule,
MatButtonModule
]
})
Angular Material Components Explained:
MatFormFieldModule
<mat-form-field> is a component used to apply common Text field styles such as the underline, floating label
<mat-form-field> is a component used to apply common Text field styles such as the underline, floating label
MatInputModule
This is directive that allows native <input> and <textarea> elements to work with <mat-form-field>
This is directive that allows native <input> and <textarea> elements to work with <mat-form-field>
MatButtonModule
This module used to apply the common button style.
This module used to apply the common button style.
Now build the login page using mat-card, mat-form-field and button as following (login.component.html)
<div fxLayout="row" fxLayoutAlign="center center" class="login-main">
<mat-card >
<mat-card-header>
<mat-card-title>Login Page</mat-card-title>
</mat-card-header>
<mat-card-content fxLayout="column">
<mat-form-field>
<input matInput placeholder="Email">
</mat-form-field>
<mat-form-field>
<input type="password" matInput placeholder="password">
</mat-form-field>
</mat-card-content>
<mat-card-actions align="end">
<button mat-raised-button color="primary">Login</button>
</mat-card-actions>
</mat-card>
</div>
Also, add the below style in the login.component.css file to make sure the alignment of your login page.
.login-main{
margin-top: 10%;
}
mat-card{
min-width: 40%;
}
Finally, we’re done with designing the login page using angular material design.
Now start creating lucrative web pages using angular material design and let us know your thoughts in the comment section. We love to hear from you!
Now start creating lucrative web pages using angular material design and let us know your thoughts in the comment section. We love to hear from you!
