Angular material checkbox

Updated March 31, 2023

Introduction to Angular material checkbox

Angular material also provides us with a checkbox with attractive designing styling and designing; it is very easy to use in our application. We can use the checkbox when we want the users to select more than one option from the list or set of options we have; it is totally depending upon the requirement we have. Angular material checkbox provides us with the same functionality as input type checkbox with addition to styling and designing added to it. In our application, we have to make a few changes and configurations in order to use this tag to create a checkbox using the material library; in the coming section of the tutorial, we will see its configuration in detail.

Syntax

Now we will see its syntax, how we can create it, and what tag or directive we need to use; let’s take a closer look at it to see below;

<mat-checkbox class="example-margin">Your text</mat-checkbox>

As you can see, we have use ‘mat-checkbox’ directive to create the checkbox using the angular material; let’s have a look at the practice syntax for a better understanding of the code;

e.g. :

<mat-checkbox class="example-margin">I am checkbox!</mat-checkbox>

In order to use the above directive, we have to make some extra configurations to your angular application by importing few modules to the root module; in the coming section, we will have a detail look at the internal implementation of the checkbox in order to use this in our angular application.

How to create a checkbox in Angular material?

As we have already known that, the checkbox can be used in the scenario where we want the user to select more options than one. It enables the choices for us and provides us with the provision to select two values from the list at a time. This angular material provides the same functionality as the input checkbox, but the difference is it comes up with more styling and designing, which makes it more attractive and interactive to the user. Let’s take a look at the steps needed to make the configuration for the material checkbox in our application; let’s get started;

1) MatCheckboxModule: This is a module which comes under the material library only once we install it, So we have to import this module inside our root module or any module in which we want to use it. After that, we can export t as well if we want this to be used in other sub modules as well within the application. For reference, find the below code;

e.g. :

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

2) mat-checkbox: This is the selector for the ‘MatCheckboxModule’ module, and this selector can be used directly to create the checkbox in our application; in order to use this directly inside our template or HTML, we must have the ‘MatCheckboxModule’ already imported inside the module, else it will give us an error. for reference, see the code below;

e.g. :

<mat-checkbox class="example-margin">ME!!</mat-checkbox>

Now let’s get started with the steps that need to be taken in order to step up our angular material project initially for beginners see below;

First, install the angular CLI, which enables us to download the required packages and library for our project. You can download it by typing the below command on your command make sure you have already installed node see below;

e.g. :

npm install -g @angular/cli)

The above command will install the CLI globally in our system; hence we can use it globally when required.

3) Now, in this step, we will try to create the new angular project from scratch; this project will not be a material project that we have to add later by installing the material dependency inside our project. so just execute the below command on your command Promat, and press enter see below;

e.g. :

ng new your project name

ng new my-first-project

This command will create the project with the name my-first-project; you can create your project with any name mentioned.

4) Just to make sure, try one command which is mentioned below to install all the required library into our project,

e.g. :

npm install

5) Now, you can test and run your project by typing the simple command which is mentioned below. This is just to make sure that we are on the right track and our project has been created without any errors or bugs inside it.

e.g. :

ng serve

6) go on browser and try to run the application with the below URL :

e.g. :

http://localhps:4200

By default, the angular project run on the port 4200; you can change it as per your need if required.

7) Now everything is set, we have our angular project now we will add the material library to our project just by running the below command on the command prompt;

e.g. :

ng add @angular/material

Example

1) Module code :

import {NgModule} from '@angular/core';
import {MatCheckboxModule} from '@angular/material/checkbox';
@NgModule({
exports: [
MatCheckboxModule,
]
})
export class CheckBoxDemo {}

2) index.html code with selector to the component in order to load it :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons&display=block" rel="stylesheet">
<title>Demo for Checkbox</title>
</head>
<body class="mat-app-background">
<checkbox-demo>Loading..</checkbox-demo>
<span class="version-info">Current build: 12.1.0</span>
</body>
</html>

3) demo.component.ts file code, which will enable or disable the checkbox based on the value of the variable;

import {Component} from '@angular/core';
/**
* @title checkbox demo !!
*/
@Component({
selector: 'checkbox-demo',
templateUrl: 'checkbox-demo.html',
styleUrls: ['checkbox-demo.css'],
})
export class CheckBoxDemo {
checked = false;
indeterminate = false;
disabled = false;
}

4) template code HTML part, here we have created the checkbox with material:

<mat-card>
<mat-card-content>
<h2>Checkbox Demo angular material !!</h2>
<section >
<mat-checkbox class="example-margin" [(ngModel)]="checked">Checked</mat-checkbox>
<mat-checkbox class="example-margin" [(ngModel)]="indeterminate">Indeterminate</mat-checkbox>
</section>
<br/><br/>
<section>
<h4>select from list:</h4>
<p><mat-checkbox >One</mat-checkbox></p>
<p><mat-checkbox >Two</mat-checkbox></p>
<p><mat-checkbox >Three</mat-checkbox></p>
</section>
<br/><br/>
<section >
<mat-checkbox class="example-margin" [(ngModel)]="disabled" [disabled]="disabled">Disabled</mat-checkbox>
</section>
</mat-card-content>
</mat-card>

Output:

Conclusion

As we have already known, what steps need to be taken, also it is very quick to create and design by using angular material library and module. this makes the effort of developers less and development of the application fast.

Recommended Articles

This is a guide to the Angular material checkbox. Here we discuss the syntax, how we can create it, and what tag or directive we need to use. You may also have a look at the following articles to learn more –

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