Angular Material Checkbox

The Angular Material library is a UI component library created by the Angular team to create design components for desktop and mobile web applications. To install it, we’ll need to have Angular installed in our project. After that’s done, use the command below to download it. Checkbox is used when we need to select one or more options from multiple options given to us. The Angular Directive <mat-checkbox> is used to provide an upgraded checkbox with material design styling and animation features. The settings required to draw a checkbox control using Angular Material will be demonstrated in this article.

Syntax:

<mat-checkbox></mat-checkbox>

Note: <mat-checkbox> provides the same functionality as a native, <input type=”checkbox”> enhanced with Material Design styling and animations.

Installation syntax:

The most basic requirement is that Angular CLI be installed on the system in order to add and configure the Angular material library. After satisfying the required condition, we can use the Angular CLI to run the following command:

ng add @angular/material

Refer to this article for detailed information about installation and setup.

Adding check box component:

‘MatCheckboxModule’ must be imported from ‘@angular/material/checkbox’ in the app.module.ts file of our app.  

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

Steps in order:

• Use the above-mentioned command to install the angular material.
• Import ‘MatCheckboxModule’ from ‘@angular/material/checkbox’ in the app.module.ts file after finishing the installation.
• We can use progress bars by just using the < mat-checkbox> tag.
• We need to give the tag a value attribute in order to indicate the progress.
• After you’ve completed the preceding stages, you can either serve or begin the project.

checkbox: The <mat-checkbox> element has the checkbox label as its content. Setting the ‘labelPosition’ property to ‘before’ or ‘after’ will place the label before or after the checkbox.

Indeterminate checkbox: Similarly to the native < input type=”checkbox”>, mat-checkbox> allows an indeterminate state. The checkbox will appear as indeterminate regardless of the checked value if the indeterminate attribute is true. The uncertain state will be removed if the user interacts with the checkbox.

disabled checkbox: user cannot use this checkbox. The disabled attribute determines whether a checkbox should be disabled or not. A deactivated element is not clickable or functional. Browsers commonly portray disabled components in gray by default.

checkboxes can also have different themes or colors which are primary, accent and warm.

Let’s look at an example where we implement all the above cases.

Example:

Output:

 

Reference: https://material.angular.io/components/checkbox/api