API reference for Angular Material checkbox
import {MatCheckboxModule} from '@angular/material/checkbox';
Directives
MatCheckbox
Selector: mat-checkbox
Exported as: matCheckboxProperties
Name | Description |
---|---|
@Input('aria-describedby')
|
The 'aria-describedby' attribute is read after the element's label and field type. |
@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({ 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 information on applying color variants in M3, see https://material.angular.io/guide/theming#using-component-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. |
Deprecated
|
Reference to the MatRipple instance of the checkbox. |
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 information on applying color variants in M3, see https://material.angular.io/guide/theming#using-component-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. |