API reference for Angular Material checkbox
import {MatCheckboxModule} from '@angular/material/checkbox';
Directives
MatCheckbox
Selector: mat-checkbox
Exported as: matCheckboxProperties
Name | Description |
---|---|
@Input('aria-controls')
|
Users can specify the |
@Input('aria-describedby')
|
The 'aria-describedby' attribute is read after the element's label and field type. |
@Input({ alias: 'aria-expanded', transform: booleanAttribute })
|
Users can specify the |
@Input('aria-label')
|
Attached to the aria-label attribute of the host element. In most cases, aria-labelledby will take precedence so this may be omitted. |
@Input('aria-labelledby')
|
Users can specify the |
@Input('aria-owns')
|
Users can specify the |
@Input({ transform: booleanAttribute })
|
Whether the checkbox is checked. |
@Input()
|
Theme color of the checkbox. This API is supported in M2 themes only, it has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/checkbox/styling. For information on applying color variants in M3, see https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants |
@Input({ transform: booleanAttribute })
|
Whether the checkbox has a ripple. |
@Input({ transform: booleanAttribute })
|
Whether the checkbox is disabled. |
@Input({ transform: booleanAttribute })
|
Whether the checkbox should remain interactive when it is disabled. |
@Input()
|
A unique id for the checkbox input. If none is supplied, it will be auto-generated. |
@Input({ transform: booleanAttribute })
|
Whether the checkbox is indeterminate. This is also known as "mixed" mode and can be used to represent a checkbox with three states, e.g. a checkbox that represents a nested list of checkable items. Note that whenever checkbox is manually clicked, indeterminate is immediately set to false. |
@Input()
|
Whether the label should appear after or before the checkbox. Defaults to 'after' |
@Input()
|
Name value will be applied to the input element if present |
@Input({ transform: booleanAttribute })
|
Whether the checkbox is required. |
@Input()
|
The value attribute of the native input element |
@Output()
|
Event emitted when the checkbox's |
@Output()
|
Event emitted when the checkbox's |
|
Returns the unique id for the visual hidden input. |
Methods
focus | |
---|---|
Focuses the checkbox. |
registerOnValidatorChange | |
---|---|
Parameters | |
fn () => void
|
|
toggle | |
---|---|
Toggles the |
validate | |
---|---|
Parameters | |
control AbstractControl<boolean, boolean>
|
|
Returns | |
ValidationErrors | null
|
|
MatCheckboxRequiredValidator
Validator for Material checkbox's required attribute in template-driven checkbox.
Current CheckboxRequiredValidator only work with input type=checkbox
and does not
work with mat-checkbox
.
Selector: mat-checkbox[required][formControlName] mat-checkbox[required][formControl] mat-checkbox[required][ngModel]
Properties
Name | Description |
---|---|
|
Tracks changes to the required attribute bound to this directive. |
Methods
enabled | |
---|---|
Parameters | |
input boolean
|
|
Returns | |
boolean
|
|
registerOnValidatorChange | |
---|---|
Parameters | |
fn () => void
|
|
validate | |
---|---|
Parameters | |
control AbstractControl<any, any>
|
|
Returns | |
ValidationErrors | null
|
|
Classes
MatCheckboxChange
Change event object emitted by checkbox.
Properties
Name | Description |
---|---|
|
The new |
|
The source checkbox of the event. |
Interfaces
MatCheckboxDefaultOptions
Default mat-checkbox
options that can be overridden.
Properties
Name | Description |
---|---|
|
Default checkbox click action for checkboxes. |
|
Default theme color of the checkbox. This API is supported in M2 themes only, it has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/checkbox/styling. For information on applying color variants in M3, see https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants |
|
Whether disabled checkboxes should be interactive. |
Type aliases
MatCheckboxClickAction
Checkbox click action when user click on input element.
noop: Do not toggle checked or indeterminate.
check: Only toggle checked status, ignore indeterminate.
check-indeterminate: Toggle checked status, set indeterminate to false. Default behavior.
undefined: Same as check-indeterminate
.
type MatCheckboxClickAction = 'noop' | 'check' | 'check-indeterminate' | undefined;
Constants
MAT_CHECKBOX_CONTROL_VALUE_ACCESSOR
const MAT_CHECKBOX_CONTROL_VALUE_ACCESSOR: any;
MAT_CHECKBOX_DEFAULT_OPTIONS
Injection token to be used to override the default options for mat-checkbox
.
const MAT_CHECKBOX_DEFAULT_OPTIONS: InjectionToken<MatCheckboxDefaultOptions>;
MAT_CHECKBOX_REQUIRED_VALIDATOR
const MAT_CHECKBOX_REQUIRED_VALIDATOR: Provider;
API reference for Angular Material checkbox-testing
import {MatCheckboxHarness} from '@angular/material/checkbox/testing';
Classes
MatCheckboxHarness
extends
ComponentHarness
Harness for interacting with a mat-checkbox in tests.
Properties
Name | Description |
---|---|
|
Methods
async
blur
|
|
---|---|
Blurs the checkbox. |
|
Returns | |
Promise<void>
|
Promise that resolves when the action completes. |
async
check
|
|
---|---|
Puts the checkbox in a checked state by toggling it if it is currently unchecked, or doing nothing if it is already checked. Note: This attempts to check the checkbox as a user would, by clicking it. Therefore if you
are using |
|
Returns | |
Promise<void>
|
Promise that resolves when the action completes. |
async
focus
|
|
---|---|
Focuses the checkbox. |
|
Returns | |
Promise<void>
|
Promise that resolves when the action completes. |
async
getAriaLabel
|
|
---|---|
Gets the checkbox's aria-label. |
|
Returns | |
Promise<string | null>
|
|
async
getAriaLabelledby
|
|
---|---|
Gets the checkbox's aria-labelledby. |
|
Returns | |
Promise<string | null>
|
|
async
getLabelText
|
|
---|---|
Gets the checkbox's label text. |
|
Returns | |
Promise<string>
|
|
async
getName
|
|
---|---|
Gets the checkbox's name. |
|
Returns | |
Promise<string | null>
|
|
async
getValue
|
|
---|---|
Gets the checkbox's value. |
|
Returns | |
Promise<string | null>
|
|
async
host
|
|
---|---|
Gets a |
|
Returns | |
Promise<TestElement>
|
|
async
isChecked
|
|
---|---|
Whether the checkbox is checked. |
|
Returns | |
Promise<boolean>
|
|
async
isDisabled
|
|
---|---|
Whether the checkbox is disabled. |
|
Returns | |
Promise<boolean>
|
|
async
isFocused
|
|
---|---|
Whether the checkbox is focused. |
|
Returns | |
Promise<boolean>
|
|
async
isIndeterminate
|
|
---|---|
Whether the checkbox is in an indeterminate state. |
|
Returns | |
Promise<boolean>
|
|
async
isRequired
|
|
---|---|
Whether the checkbox is required. |
|
Returns | |
Promise<boolean>
|
|
async
isValid
|
|
---|---|
Whether the checkbox is valid. |
|
Returns | |
Promise<boolean>
|
|
async
toggle
|
|
---|---|
Toggles the checked state of the checkbox. Note: This attempts to toggle the checkbox as a user would, by clicking it. Therefore if you
are using |
|
Returns | |
Promise<void>
|
Promise that resolves when the action completes. |
async
uncheck
|
|
---|---|
Puts the checkbox in an unchecked state by toggling it if it is currently checked, or doing nothing if it is already unchecked. Note: This attempts to uncheck the checkbox as a user would, by clicking it. Therefore if you
are using |
|
Returns | |
Promise<void>
|
Promise that resolves when the action completes. |
static
with
|
|
---|---|
Gets a |
|
Parameters | |
options CheckboxHarnessFilters = {}
|
Options for narrowing the search:
|
Returns | |
HarnessPredicate<T>
|
a |
Interfaces
CheckboxHarnessFilters
A set of criteria that can be used to filter a list of MatCheckboxHarness
instances.
Properties
Name | Description |
---|---|
|
Only find instances with the given checked value. |
|
Only find instances which match the given disabled state. |
|
Only find instances whose label matches the given value. |
|
Only find instances whose name attribute is the given value. |