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()
|
Whether the checkbox is checked. |
@Input()
|
Theme color palette for the component. |
@Input()
|
Whether ripples are disabled. |
@Input()
|
Whether the checkbox is disabled. This fully overrides the implementation provided by mixinDisabled, but the mixin is still required because mixinTabIndex requires it. |
@Input()
|
A unique id for the checkbox input. If none is supplied, it will be auto-generated. |
@Input()
|
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()
|
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 |
|
Default color to fall back to if no value is set. |
|
Tabindex to which to fall back to if no value is set. |
|
Returns the unique id for the visual hidden input. |
|
Reference to the ripple instance of the checkbox. |
Methods
focus | |
---|---|
Focuses the checkbox. |
toggle | |
---|---|
Toggles the |
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 palette to be used for checkboxes. |
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
Harness for interacting with a MDC-based 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
|
|
---|---|
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. |