Question

Explain Angular Material Checkbox

Answer 1

The <mat-checkbox> is used as an enhanced checkbox with content design styling and animation features. It provides precise functionality as a basic <input type = "checkbox"> content design enhanced with styling and animations.

The checkbox label is provided as the content of the <mat-checkbox> element. The brand is posted by setting the Label Status property to 'Before' or 'After' before or after the checkbox. If you do not want the label to appear next to the checkbox, you can use aria-label or aria-label to specify a suitable label.

Use with @angular/forms

<mat-checkbox> is compatible with @ angular / forms and supports both FormsModule and ReactiveFormsMinule.

Intermediate state

<mat-checkbox> supports an indefinite state <input type = "checkbox">. Although the indefinite property of the checkbox is correct, it will render it as undetermined regardless of the checked value.

Click on action config

When the user clicks the matte-checkbox, the default behavior toggles the checked value and sets Uncertain to False. It provides functionality similar to a native <input type = "checkbox"> enhanced with <mat- <mat-checkbox> material design styling and animations.

1.  providers: [  
2.   {provide: MAT_CHECKBOX_DEFAULT_OPTIONS, useValue: { clickAction: 'noop' } as MatCheckboxDefaultOptions}  
3. ]  

The possible values are:

noop

Do not change the indefinite value. Developers have the power to implement customized click actions.

check

Ignore the indefinite value and toggle the checked value of the checkbox. If the checkbox is in an indefinite state then the checkbox will display as an indefinite checkbox of the checked value.

check-indeterminate

When the user clicks the mat-checkbox, set Uncertain to False.

Theming

The color of <mat-checkbox> will be changed using the color property. Checkboxes use the theme's accent color by default. It can be adjusted to 'Primary' or 'Warning'.

Accessibility

<mat-checkbox> uses internal <input type = "checkbox"> to provide an accessible experience. It receives the internal checkbox focus and is automatically labelled the text content of the <mat-checkbox> element.

Createing Angular Application

Follow the steps to update the Angular application:

1. Create a project with a content application.
2. Modify module.ts, app.component.ts, app.component.css and app.component.html. Keep the remaining files unchanged.
3. Compile and run the application.

Let's see an example.

The file is a modified module descriptor.

app.module.ts

1. import { BrowserModule } from '@angular/platform-browser';  
2. import { NgModule } from '@angular/core';  
3. import { AppComponent } from './app.component';  
4. import {BrowserAnimationsModule} from '@angular/platform-browser/animations';  
5. import {MatCheckboxModule} from '@angular/material';  
6. import {FormsModule, ReactiveFormsModule} from '@angular/forms';  
7. @NgModule({  
8.    declarations: [  
9.       AppComponent  
10.    ],  
11.    imports: [  
12.       BrowserModule,  
13.       BrowserAnimationsModule,  
14.       MatCheckboxModule,  
15.       FormsModule,  
16.       ReactiveFormsModule  
17.    ],  
18.    providers: [],  
19.    bootstrap: [AppComponent]  
20. })  
21. export class AppModule { }  

app.component.html

1. <h2 class = "tp-h2">Checkbox configuration</h2>  
2. <section class = "tp-section">  
3.    <mat-checkbox class = "tp-margin" [(ngModel)] = "checked">Checked</mat-checkbox>  
4.    <mat-checkbox class = "tp-margin" [(ngModel)] = "indeterminate">Indeterminate</mat-checkbox>  
5. </section>   
6. <section class = "tp-section">  
7.    <mat-checkbox class = "tp-margin" [(ngModel)] = "disabled">Disabled</mat-checkbox>  
8. </section>  
9. <h2 class = "tp-h2">Result</h2>  
10. <section class = "tp-section">  
11.    <mat-checkbox  
12.       class = "tp-margin"  
13.       [(ngModel)] = "checked"  
14.       [(indeterminate)] = "indeterminate"  
15.       [labelPosition] = "labelPosition"  
16.       [disabled] = "disabled">  
17.       Sample Checkbox  
18.    </mat-checkbox>  
19. </section>  

app.component.css

1. .tp-h2 {  
2.    margin: 10px;  
3. }  
4. .tp-section {  
5.    display: flex;  
6.    align-content: center;  
7.    align-items: center;  
8.    height: 60px;  
9. }  
10. .tp-margin {  
11.    margin: 0 10px;  
12. }  

app.component.ts

1. import { Component } from '@angular/core';  
2. import { FormControl } from "@angular/forms";  
3. @Component({  
4.    selector: 'app-root',  
5.    templateUrl: './app.component.html',  
6.    styleUrls: ['./app.component.css']  
7. })  
8. export class AppComponent {  
9.    title = 'materialApp';  
10.    checked = false;  
11.    indeterminate = false;  
12.    labelPosition = 'after';  
13.    disabled = false;  
14. }  

Output:

Previously, we have created three check boxes using mat-checkboxes and tied them using ngModel with variables. After that, we have created another checkbox and tied its various attributes with variables in the .ts file.

Let's see another example to create check boxes.

app.component.html

1. <section class="example-section">  
2.   <mat-checkbox class="example-margin">Check me!</mat-checkbox>  
3.   <mat-checkbox class="example-margin" [disabled]="true">Disabled</mat-checkbox>  
4. </section>  
5.   
6. <section class="example-section">  
7.   <span class="example-list-section">  
8.     <mat-checkbox class="example-margin"  
9.                   [checked]="allComplete"  
10.                   [color]="task.color"  
11.                   [indeterminate]="someComplete()"  
12.                   (change)="setAll($event.checked)">  
13.       {{task.name}}  
14.     </mat-checkbox>  
15.   </span>  
16.   <span class="example-list-section">  
17.     <ul>  
18.       <li *ngFor="let subtask of task.subtasks">  
19.         <mat-checkbox [(ngModel)]="subtask.completed"  
20.                       [color]="subtask.color"  
21.                       (ngModelChange)="updateAllComplete()">  
22.           {{subtask.name}}  
23.         </mat-checkbox>  
24.       </li>  
25.     </ul>  
26.   </span>  
27. </section>  

app.module.ts

1. import {Component} from '@angular/core';  
2. import {ThemePalette} from '@angular/material/core';  
3. export interface Task {  
4.   name: string;  
5.   completed: boolean;  
6.   color: ThemePalette;  
7.   subtasks?: Task[];  
8. }  
9. /**  
10.  * @title Basic checkboxes  
11.  */  
12. @Component({  
13.   selector: 'checkbox-overview-example',  
14.   templateUrl: 'checkbox-overview-example.html',  
15.   styleUrls: ['checkbox-overview-example.css'],  
16. })  
17. export class CheckboxOverviewExample {  
18.   task: Task = {  
19.     name: 'Indeterminate',  
20.     completed: false,  
21.     color: 'primary',  
22.     subtasks: [  
23.       {name: 'Primary', completed: false, color: 'primary'},  
24.       {name: 'Accent', completed: false, color: 'accent'},  
25.       {name: 'Warn', completed: false, color: 'warn'}  
26.     ]  
27.   };  
28.   allComplete: boolean = false;  
29.   updateAllComplete() {  
30.     thisthis.allComplete = this.task.subtasks != null && this.task.subtasks.every(t => t.completed);  
31.   }  
32.   someComplete(): boolean {  
33.     if (this.task.subtasks == null) {  
34.       return false;  
35.     }  
36.     return this.task.subtasks.filter(t => t.completed).length > 0 && !this.allComplete;  
37.   }  
38.   setAll(completed: boolean) {  
39.     this.allComplete = completed;  
40.     if (this.task.subtasks == null) {  
41.       return;  
42.     }  
43.     this.task.subtasks.forEach(t => t.completed = completed);  
44.   }  
45. }  

app.component.css:

1. .example-section {  
2.   margin: 12px 0;  
3. }  
4. .example-margin {  
5.   margin: 0 12px;  
6. }  
7. ul {  
8.   list-style-type: none;  
9.   margin-top: 4px;  
10. }  

Output:

When we click on the check boxes, the boxes fill with color and a small check sign appears to it.