What is Angular Material and How to Implement it?

UI/UX components in Angular, are known as Angular Materials. They help Angular Applications perform efficiently. However, if you are not aware of them yet, here is an article to help you learn Angular Materials in detail. Also, to get in-depth knowledge of Angular, consider enrolling in Angular Certification Training from Edureka.

In this article, I will be going over the following topics: 

• Introduction to Angular Materials
• Angular Material Installation
• Angular Material Components
  • Navigation
    1. Toolbar
    2. Menu
  • Form Controls
    1. Form Field
    2. Radio Button
• Angular Material CDK
  • Text Field

If you would like to learn more about Angular, and gear your career towards a proficient Angular Developer, then consider enrolling for our Angular Course.

Introduction to Angular Materials

Materials were introduced as a design language that was developed by Google in 2014. Material Design is a tool for front-end frameworks, which helps you with visual, motion, and interaction design. It also helps you adapt across different devices and different screen sizes. First, it was tagged to AngularJS to make these apps more attractive and perform faster. Then, Google completely re-wrote the code from the scratch and removed JS i.e. JavaScript, and named it Angular in September 2016. Later, Google tagged the Material Design to Angular, which uses TypeScript, and named it Angular Materials. 

Angular Materials or User-Interface (UI) components help you to design your application in a structured manner. They attract users and make it easier to access the elements or the components present in your application. They also help in designing your applications in an attractive manner, with unique styles and shapes. These components help in making your application more consistent, fast, versatile and even design responsive websites.

Angular Material Installation

Now, let’s start with a quick tutorial on how to install Angular Materials. First things first, make sure you have Angular installed in your system. If you are not familiar with Angular, refer to the link on Angular CLI Installation. Once you have everything set up, you can add Angular Materials to your project using the following command:

ng add @angular/material

First, it will ask you to choose a prebuilt theme name or a custom theme.

You need to choose the “Indigo/Pink” prebuilt theme which is the default theme to style your application. You can also choose the “Custom” theme so that you can customize your theme files which include all common styles.

Next, it will ask you to set up HammerJS. HammerJS is a popular library, majorly used in Angular application. It adds support for touch gestures like Swipe, Pan, Pinch, Rotate and many more, especially in mobile applications. 

You could choose either “Yes” or “No”. HammerJS can be useful when you use your application on mobiles. As mobiles offer touch displays, these gestures are more useful and may look trendy in your mobile application. 

After you choose your choice, next it will ask you to set up Browser Animations for Angular Material. 

You need to choose “Yes” so that you could use animations on your application. Angular Animations make your application more fun and easier to use. This can improve your app and user experience which attracts users’ attention. 

Subsequently, this will install Angular Materials in your application.

Also Read: React Vs. Angular

Angular Material Components

As mentioned earlier, Angular Material Components are nothing but UI/UX Design Components. They contain a various range of components like Form Controls, Navigation, Buttons & Indicators, Popups and many more. These components help you implement patterns according to the Material Design specification. 

Moving ahead, let’s see a few examples of how to implement these components in your Angular Application. 

Navigation

First, I will discuss the components in Navigation.

• Toolbar

You need to type the following code in the app.component.html file to use the Toolbar component in your application.

<mat-toolbar color=&rdquo;primary&rdquo;>
    <span>Angular Material Tutorial</span>
</mat-toolbar>

<mat-toolbar> is a container from Angular material that is used for headers and titles. The color of the <mat-toolbar> container can be changed by using the color property. By default, toolbars use a neutral background color based on the current theme i.e. either light or dark. You can choose three default themes which are: ‘primary’, ‘accent’, or ‘warn’. To use this toolbar, you need to first import it in app.module.ts file from Angular materials using the following command:

import { MatToolbarModule } from '@angular/material';

Later, you need to also add this module in the imports: [ ] section located in the app.module.ts file.

imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatToolbarModule
],

For Mat-Toolbar, you need to add “MatToolbarModule”. 

Now, let’s serve your project using the following command:

ng serve -o

This will open your project on the default browser of your system as shown below:

If you wish to change the color of the toolbar as per your choice, you can do it with the help of CSS stylesheet. Let me show you an example.

First, you need to erase color property from <mat-toolbar> container and then, type the following CSS code in the app.component.css file.

mat-toolbar{
    background-color: /*color-of-your-choice*/;
    color: /*text-color*/;
}

Now, serve your project to see the result. 

• Menu

Next, I will discuss the Menu Component. You need to type the following code in your app.component.html file.

<mat-toolbar color=&rdquo;primary&rdquo;>
    <span>Angular Material Tutorial</span>
    <span class=&rdquo;space&rdquo;></span>
    <button class=&rdquo;btns&rdquo; mat-button [matMenuTriggerFor]=&rdquo;menu&rdquo;>Menu</button>
    <mat-menu #menu=&rdquo;matMenu&rdquo;>
	<button mat-menu-item>Settings</button>
	<button mat-menu-item>Help</button>
    </mat-menu>
</mat-toolbar>

Let’s add some styling on the Menu button. You need to type the following code in your app.component.css file.

.space{
    flex: 1 1 auto;
}

.btns{
    width: 100px;
    height: 40px;
    font-size: large;
    border-radius: 10px;
    border: 3px solid #113c89;
    background-color: lightcoral;
}

class = ”space” is used to add spacing between “Toolbar Name” and “Menu Option”.

In case, you are not familiar with CSS stylesheet, you can refer to our blog on CSS Tutorial to get in-depth. 

Just like Toolbar, to use <mat-menu> and <mat-button> containers, you need to follow the same procedure as above, to import MatMenuModule and MatButtonModule from angular material and add them in imports: [ ] section located in app.module.ts file. 

Serve your project now to display the output. 

Take your coding skills to the next level with our hands-on Best Web Development course.

Form Controls

Now, I will discuss the components in Form Control.

• Form Field

As the name suggests, Form-Field is used for inputs given by the user. It is most commonly used for Registration of a user, in an application or a website. 

You need to type the following code in the app.component.html file to use the Form-Field component in your application.

<h2 class=&rdquo;example-container&rdquo;>Form Controls</h2>

	
<div class=&rdquo;example-container&rdquo;>
		<mat-form-field appearance=&rdquo;fill&rdquo;>
			<mat-label>Name</mat-label>
			<input matInput placeholder=&rdquo;ABC&rdquo;>
		</mat-form-field>
	</div>

As usual, you need to import MatFormFieldModule and MatInputModule and add them in imports: [ ] section located in the app.module.ts file. The above code is generally used to input Names like “First Name”, “Last Name”, etc. You can even use Validators and make a field mandatory. For example, you can use it for the E-mail field. You can hide or unhide the text for Passwords. For your reference, check out the code below:

<div class="example-container">
<mat-form-field appearance="fill">
    			<mat-label>Enter your email</mat-label>
    			<input matInput placeholder="abc@example.com" [formControl]="email" required>
<mat-error *ngIf="email.invalid">{{getErrorMessage()}}</mat-error>
  		</mat-form-field>
</div>



<div class="example-container">
  	<mat-form-field appearance="fill">
    		<mat-label>Enter your password</mat-label>
<input matInput [type]="hide ? 'password' : 'text'">
<button mat-icon-button matSuffix (click)="hide = !hide" [attr.aria-label]="'Hide password'" [attr.aria-pressed]="hide">
<mat-icon>{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
   		 </button>
  	</mat-form-field>
	</div>

In your app.component.css file, you need to add the following code:

.example-container{
    padding-left: 50px;
}

Now, in your app.component.ts file, you need to import FormControl and Validators from @angular/forms directory. 

import {FormControl, Validators} from '@angular/forms';

You need to even add the text to display an error inside the following class. 

export class AppComponent {
    email = new FormControl('', [Validators.required, Validators.email]);
    
    getErrorMessage() {
        return this.email.hasError('required') ? 'You must enter a value' :
               this.email.hasError('email') ? 'Not a valid email' :
            '';
    }

    hide = true;
}

Referring to the above procedure, you need to type the following code in your app.module.ts file to import the necessary modules.

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatIconModule } from '@angular/material';

Later, you need to add these modules in imports: [ ] section. 

• Radio Button

Radio Buttons are generally used for choosing a choice among the different options. You can check out the following code for reference. 

For app.component.html file,

<div>
    
<h3 class=&rdquo;example-container&rdquo;>Gender</h3>

    <mat-radio-group aria-label="Select an option">
        <mat-radio-button value="1">Male</mat-radio-button>
        <mat-radio-button value="2">Female</mat-radio-button>
    </mat-radio-group>
</div>

For app.component.css file,

mat-radio-button{
    Padding-left: 50px;
}

Now, you need to import MatRadioModule and add it in imports: [ ] section located in the app.module.ts file.

Later, you need to serve your project to display the output.

Moving ahead, I will discuss Angular Material CDK. 

Angular Material CDK

CDK, also known as Component Dev Kit, is a library of predefined behaviors in Angular Material, which is a set of tools that implement common interaction patterns and application features. It does not have any styling specific to Material Design. Let’s see an example of CDK. 

• Text Field

Text Field component provides utilities for working with text input fields. You can use CDK components on Text Field to resize the inputs. Let’s see an example of how to implement it. 

For app.component.html file,

<div class=&rdquo;example-container&rdquo;>
	
<h2>Angular Material CDK</h2>

	<mat-form-field>
  		<mat-label>Font size</mat-label>
        <mat-select #fontSize value="16px" (selectionChange)="triggerResize()">
    		<mat-option value="10px">10px</mat-option>
    		<mat-option value="12px">12px</mat-option>
    		<mat-option value="14px">14px</mat-option>
    		<mat-option value="16px">16px</mat-option>
    		<mat-option value="18px">18px</mat-option>
    		<mat-option value="20px">20px</mat-option>
  	</mat-select>
        </mat-form-field>

        <mat-form-field [style.fontSize]="fontSize.value" class=&rdquo;example-container&rdquo;>
  		<mat-label>Autosize textarea</mat-label>
  		<textarea matInput cdkTextareaAutosize #autosize="cdkTextareaAutosize" cdkAutosizeMinRows="1" cdkAutosizeMaxRows="5"></textarea>
        </mat-form-field>
</div>

For the app.component.ts file, you need to import the components necessary first. 

import {CdkTextareaAutosize} from '@angular/cdk/text-field';
import {NgZone, ViewChild} from '@angular/core';
import {take} from 'rxjs/operators';

Now, you need to type the following code inside the class.

export class AppComponent {
    constructor(private _ngZone: NgZone) {}

    @ViewChild('autosize', {static: false}) autosize: CdkTextareaAutosize;

    triggerResize() {
        this._ngZone.onStable.pipe(take(1))
            .subscribe(() => this.autosize.resizeToFitContent(true));
    }
}

Next, you need to import MatSelectModule and add it in imports: [ ] section located in the app.module.ts file.

Finally, you need to serve your project to display the output. 

This is not the conclusion and there are several other components in Angular Materials. You can refer to them from the official website of Angular Material. 

With this, I would like to end my blog. I hope you are clear about the fundamentals of Angular Material. If you have any doubts or queries regarding this article, do not hesitate to post them in the comments section below. 

Got a question for us? Please mention it in the comments section of this “Angular Material” blog and we will get back to you as soon as possible.