Angular material component

Updated April 17, 2023

Introduction to Angular material component

Angular provides various components which can be used to create the Ui component which includes buttons, icons, popups,s, and many more. But we have provision by which we can create our custom component as well, but this can be created by using angular also. To make use of any of the angular component we have to have the angular material library in place, after that we can use the module which can be used to create the different type of component on our UI which comes with the default animation and designing and make the Ui more user friendly. In the coming section of the tutorial we will see the steps required to use component of material inside our application for beginners.

Syntax:

As we already know that, in order to create the UI we have to make use of these component, which we will use in the coming section of the tutorial. let’s first see the syntax we create the component in the material or angular application see below;

@Component({
selector: 'elector name',
templateUrl: 'html file path or name',
})

We can create custom component in angular by proving the extension as ‘.ts’ also we can use the existing component from the material library. to create the UI for the application. to make use of the existing one we can easily import the module and start using the component.

How does component work in Angular material?

In angular material, we have different type of component available which provide different type of functionality to the user and UI. In this action we will see steps to use those compound inside the angular application let’s get started see below;

1. MatButtonModule: Material provide us ”MatButtonModule’ which helps us to create the button without default styling and designing. it is like simple button element but comes up with default animation. we have to import this module inside our root module file by which we will be available to use the component and the selector on the template;

e.g. :

import {MatButtonModule} from '@angular/material/button';

2. MatButtonToggleModule: this is the another component provide by the material library. We have to import this also inside the root module in order to use this. This button represents on/off appearance to the button in short toggle appearance. for reference see the below import for this module;

e.g. :

import {MatButtonToggleModule} from '@angular/material/button-toggle';

3. MatCardModule: This is also another component which act as the container to represent other elemnent together. We have to import the below package in order to use this;

e.g. :

import {MatCardModule} from '@angular/material/card';

4. MatCheckboxModule: this is used to create the checkbox for our application. Import this inside the root module for reference see the below code;

e.g. :

import {MatCheckboxModule} from '@angular/material/checkbox';

There are so many material components which provided by the material library we can use any of them. Now let’s take a look at the project creation for the angular material and steps which needs to be taken see below;

1) First we have to install the angular CLI which can be used to build, run and create the angular project from the scratch. follow the below command to install the CLI globally and used from anywhere from the system see below;

e.g. :

npm install -g @angular/cli

2) now we can create the project using the CLI, just execute the below command with the name specified. Also we can see the project structure once it gets created see below;

e.g. :

ng new your project name

>> ng new my-first-project

as per your choice  ‘my-first-project’
3) Now we can run the below command to install the dependency and it will create the node module folder or us, this folder will contain the dependency;

e.g. :

npm install

4) after this we can start the server and see the changes just by executing the below command.

e.g. :

ng serve

5) now we can run the application using the below URL , remember the default port for angular is 4200, but we can change it while creating the project for angular;

e.g. :

http://localhps:4200

6) install the material library using the below command. After this successful installation we can able be used the component provided by the material library

e.g. :

ng add @angular/material

After this we are ready to create our first component using the material library. Also we can create the custom component but that will not be part of material library.

Example

Here is the simple example to show to usage of component inside the angular application. Just follow the below code and import the component you want to use in the application:

1) index.html code:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/normalize.css">
<my-comp>loading</my-comp>

2) demo-com.componenet.ts code:

import { Component } from '@angular/core';
@Component({
selector: 'my-comp',
templateUrl: './demo-com.componenet.html',
styleUrls: [ './demo-com.componenet.css' ]
})
export class DemoComponent  {}

3) demo-com.componenet.html code:

<h5>Angular Material Component !!</h5>
<span>Button Component</span> <br/> <br/>
<button mat-raised-button>Button 1</button>
<button mat-raised-button color="primary">Button 2</button>
<button mat-raised-button color="accent">Button 3</button>
<button mat-raised-button color="warn">Button 4</button>
<br/><br/>
<span>Button toggle Component</span> <br/> <br/>
<mat-button-toggle-group name="fontStyle" aria-label="Font Style">
<mat-button-toggle value="bold">Bold</mat-button-toggle>
<mat-button-toggle value="italic">Italic</mat-button-toggle>
<mat-button-toggle value="underline">Underline</mat-button-toggle>
</mat-button-toggle-group>
<br/><br/>
<span>Icon Component</span> <br/> <br/>
<mat-icon aria-hidden="false" aria-label="Example home icon">home</mat-icon>
<mat-icon aria-hidden="false" aria-label="Example home icon">favorite_border</mat-icon>
<mat-icon aria-hidden="false" aria-label="Example home icon">face</mat-icon>
<mat-icon aria-hidden="false" aria-label="Example home icon">room</mat-icon>

4) module.ts code:

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { MaterialModule } from "./material.module";
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { DemoComponent } from "./demo-com.componenet";
@NgModule({
imports: [BrowserModule, BrowserAnimationsModule, MaterialModule, FormsModule],
declarations: [DemoComponent],
bootstrap: [DemoComponent]
})
export class DemoComponentModule {}

Output:

Conclusion

As from the article we have seen that we can easily create our custom component also we can make use of the existing one provided by the angular material. follow the above-mentioned steps in the article it is very easy to create, maintain and handle by the developers as well.

Recommended Articles

This is a guide to Angular material component. Here we discuss we can easily create our custom component also we can make use of the existing one. You may also have a look at the following articles to learn more –

1. Angular Material Icons
2. Angular CLI
3. Angular 7 Features
4. AngularJS Date Filter