Angular Material Checkbox

Angular Material – Checkbox: <md-checkbox> directive is used to create Checkbox as in AngularJs. Here in this tutorial we are going to explain how you can use Angular Material Checkbox with example. You can also use our online editor to edit and run the code online.

Angular Material Checkbox Example

Let us first create a simple checkbox using Angular Material directive-

<md-checkbox ng-model="isChecked" aria-label="Finished?">
  Finished ?
</md-checkbox>

<md-checkbox md-no-ink="" ng-model="hasInk" aria-label="No Ink Effects">
  No Ink Effects
</md-checkbox>

<md-checkbox ng-disabled="true" ng-model="isDisabled" aria-label="Disabled">
  Disabled
</md-checkbox>

If you run the above example it will produce output something like this –

Options Available

Following options are available in Angular Material Checkbox –

• * ng-model(string)
  Angular expression to data-bind to.
• name(string)
  Property name of the form under which the control is published.
• ng-true-value(expression)
  The value to which the expression should be set when selected.
• ng-false-value(expression)
  The value to which the expression should be set when not selected.
• ng-change(string)
  Angular expression is executed when user changes the input with the input element.
• md-no-ink(boolean)
  This attribute is used to indicate the use of ripple ink effects.
• aria-label(string)
  Adds label to checkbox for accessibility. Default is checkbox’s text. If no default is found then a log will be created.
• md-indeterminate(expression)
  This determines when the checkbox should be rendered as ‘indeterminate’.
• ng-checked(expression)
  If checkbox is checked then this expression is evaluated as true and css class md-checked is added to the checkbox which displays it as selected.