Angular Material Checkbox & Radio Button

Angular material checkbox and radio buttons behave exactly the same as the native checkboxes and radio buttons the only difference the styling and animations that part of the material library.

angular material - checkboxes

The first step is to import the module in material.module.ts and add it to our famous array.

import { MatCheckboxModule } from "@angular/material";

const MaterialComponents = [
  MatCheckboxModule
];

Now we can add a material checkbox in the HTML, the component for that is mat-checkbox and what's inside this component is treated as the checkbox label.

<mat-checkbox>
  I'm learning
</mat-checkbox>

angular material - checkboxes As you can see in the browser you can see that we have a checkbox which behaves exactly a regular checkbox but with addition of styling and animation, by default the label is positioned to the right of the checkbox but we can position it to the left if we want using the labelPosition attribute.

<mat-checkbox>
  I'm learning
</mat-checkbox>
<br />
<mat-checkbox labelPosition="before">
  I'm not learning
</mat-checkbox>

angular material customize checkboxes You can see that the label is placed before the checkbox which is the left hand side.

Also if you have noticed the theme or color of checkbox is accent color by default you can change it to primary or warn using the color attribute on mat-checkbox component.

<mat-checkbox color="primary">
  I'm learning
</mat-checkbox>
<br />
<mat-checkbox color="warn">
  I'm not learning
</mat-checkbox>

angular material checkboxes color You can see that the first checkbox has a primary color and the second one has a warn theme color. That's all there is to customize the checkbox in angular material.

angular material - radio buttons

Again they're basically native radio buttons with material styling and animations. As always the first step is to import the radio button module in material.module.ts.

import { MatRadioModule } from "@angular/material";

const MaterialComponents = [
  MatRadioModule
];

Now we can use radio buttons in the HTML, there are two main components that we're going to deal with mat-radio-group and mat-radio-button which are usually placed inside the mat-radio-group.

<mat-radio-group>
  <mat-radio-button value="angular">Angular</mat-radio-button>
  <mat-radio-button value="react">React</mat-radio-button>
  <mat-radio-button value="vue">Vue</mat-radio-button>
</mat-radio-group>

angular material - radio buttons You can see the 3 radio buttons, again by default the color of the radio button is set to accent color of the theme you can change it using the color attribute the same as checkboxes.

Now if you want to access the value of either the checkbox or radio button you can do it with tow-way binding make sure to import the formsModule and use a banana in a boxing tags for two-way binding.

Alright that is pretty much about radio buttons and checkboxes in angular material, for a detailed explanation please visit the documentation for checkboxes or radio buttons.