API reference for Angular Material radio
import {MatRadioModule} from '@angular/material/radio';
Directives
MatRadioGroup
A group of radio buttons. May contain one or more <mat-radio-button>
elements.
Selector: mat-radio-group
Exported as: matRadioGroupProperties
Name | Description |
---|---|
@Input()
|
Theme color of the radio buttons in the group. 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/radio/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 radio group is disabled |
@Input({ transform: booleanAttribute })
|
Whether buttons in the group should be interactive while they're disabled. |
@Input()
|
Whether the labels should appear after or before the radio-buttons. Defaults to 'after' |
@Input()
|
Name of the radio button group. All radio buttons inside this group will use this name. |
@Input({ transform: booleanAttribute })
|
Whether the radio group is required |
@Input()
|
The currently selected radio button. If set to a new radio button, the radio group value will be updated to match the new selected button. |
@Input()
|
Value for the radio-group. Should equal the value of the selected radio button if there is a corresponding radio button with a matching value. If there is not such a corresponding radio button, this value persists to be applied in case a new radio button is added with a matching value. |
@Output()
|
Event emitted when the group value changes.
Change events are only emitted when the value changes due to user interaction with
a radio button (the same behavior as |
MatRadioButton
Selector: mat-radio-button
Exported as: matRadioButtonProperties
Name | Description |
---|---|
@Input('aria-describedby')
|
The 'aria-describedby' attribute is read after the element's label and field type. |
@Input('aria-label')
|
Used to set the 'aria-label' attribute on the underlying input element. |
@Input('aria-labelledby')
|
The 'aria-labelledby' attribute takes precedence as the element's text alternative. |
@Input({ transform: booleanAttribute })
|
Whether this radio button is checked. |
@Input()
|
Theme color of the radio button. 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/radio/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 ripples are disabled inside the radio button |
@Input({ transform: booleanAttribute })
|
Whether the radio button is disabled. |
@Input({ transform: booleanAttribute })
|
Whether the radio button should remain interactive when it is disabled. |
@Input()
|
The unique ID for the radio button. |
@Input()
|
Whether the label should appear after or before the radio button. Defaults to 'after' |
@Input()
|
Analog to HTML 'name' attribute used to group radios for unique selection. |
@Input({ transform: booleanAttribute })
|
Whether the radio button is required. |
@Input()
|
The value of this radio button. |
@Output()
|
Event emitted when the checked state of this radio button changes.
Change events are only emitted when the value changes due to user interaction with
the radio button (the same behavior as |
|
ID of the native input element inside |
|
The parent radio group. May or may not be present. |
Methods
focus | |
---|---|
Focuses the radio button. |
|
Parameters | |
options? FocusOptions
|
|
origin? FocusOrigin
|
|
Classes
MatRadioChange
Change event object emitted by radio button and radio group.
Properties
Name | Description |
---|---|
|
The radio button that emits the change event. |
|
The value of the radio button. |
Interfaces
MatRadioDefaultOptions
Properties
Name | Description |
---|---|
|
Theme color of the radio button. 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/radio/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 radio buttons should be interactive. |
Functions
MAT_RADIO_DEFAULT_OPTIONS_FACTORY | |
---|---|
Returns | |
MatRadioDefaultOptions
|
|
Constants
MAT_RADIO_GROUP
Injection token that can be used to inject instances of MatRadioGroup
. It serves as
alternative token to the actual MatRadioGroup
class which could cause unnecessary
retention of the class and its component metadata.
const MAT_RADIO_GROUP: InjectionToken<MatRadioGroup>;
MAT_RADIO_DEFAULT_OPTIONS
const MAT_RADIO_DEFAULT_OPTIONS: InjectionToken<MatRadioDefaultOptions>;
API reference for Angular Material radio-testing
import {MatRadioGroupHarness} from '@angular/material/radio/testing';
Classes
MatRadioGroupHarness
extends
ComponentHarness
Harness for interacting with a mat-radio-group in tests.
Properties
Name | Description |
---|---|
|
The selector for the host element of a |
Methods
async
checkRadioButton
|
|
---|---|
Checks a radio button in this group. |
|
Parameters | |
filter? RadioButtonHarnessFilters
|
An optional filter to apply to the child radio buttons. The first tab matching the filter will be selected. |
Returns | |
Promise<void>
|
Promise that resolves when the action completes. |
async
getCheckedRadioButton
|
|
---|---|
Gets the checked radio-button in a radio-group. |
|
Returns | |
Promise<MatRadioButtonHarness | null>
|
|
async
getCheckedValue
|
|
---|---|
Gets the checked value of the radio-group. |
|
Returns | |
Promise<string | null>
|
|
async
getId
|
|
---|---|
Gets the id of the radio-group. |
|
Returns | |
Promise<string | null>
|
|
async
getName
|
|
---|---|
Gets the name of the radio-group. |
|
Returns | |
Promise<string | null>
|
|
async
getRadioButtons
|
|
---|---|
Gets a list of radio buttons which are part of the radio-group. |
|
Parameters | |
filter? RadioButtonHarnessFilters
|
Optionally filters which radio buttons are included. |
Returns | |
Promise<MatRadioButtonHarness[]>
|
|
async
host
|
|
---|---|
Gets a |
|
Returns | |
Promise<TestElement>
|
|
static
with
|
|
---|---|
Gets a |
|
Parameters | |
options RadioGroupHarnessFilters = {}
|
Options for filtering which radio group instances are considered a match. |
Returns | |
HarnessPredicate<T>
|
a |
MatRadioButtonHarness
extends
ComponentHarness
Harness for interacting with a mat-radio-button in tests.
Properties
Name | Description |
---|---|
|
The selector for the host element of a |
Methods
async
blur
|
|
---|---|
Blurs the radio-button. |
|
Returns | |
Promise<void>
|
Promise that resolves when the action completes. |
async
check
|
|
---|---|
Puts the radio-button in a checked state by clicking it if it is currently unchecked, or doing nothing if it is already checked. |
|
Returns | |
Promise<void>
|
Promise that resolves when the action completes. |
async
focus
|
|
---|---|
Focuses the radio-button. |
|
Returns | |
Promise<void>
|
Promise that resolves when the action completes. |
async
getId
|
|
---|---|
Gets the radio-button's id. |
|
Returns | |
Promise<string | null>
|
|
async
getLabelText
|
|
---|---|
Gets the radio-button's label text. |
|
Returns | |
Promise<string>
|
|
async
getName
|
|
---|---|
Gets the radio-button's name. |
|
Returns | |
Promise<string | null>
|
|
async
getValue
|
|
---|---|
Gets the value of the radio-button. The radio-button value will be converted to a string. Note: This means that for radio-button's with an object as a value |
|
Returns | |
Promise<string | null>
|
|
async
host
|
|
---|---|
Gets a |
|
Returns | |
Promise<TestElement>
|
|
async
isChecked
|
|
---|---|
Whether the radio-button is checked. |
|
Returns | |
Promise<boolean>
|
|
async
isDisabled
|
|
---|---|
Whether the radio-button is disabled. |
|
Returns | |
Promise<boolean>
|
|
async
isFocused
|
|
---|---|
Whether the radio-button is focused. |
|
Returns | |
Promise<boolean>
|
|
async
isRequired
|
|
---|---|
Whether the radio-button is required. |
|
Returns | |
Promise<boolean>
|
|
static
with
|
|
---|---|
Gets a |
|
Parameters | |
options RadioButtonHarnessFilters = {}
|
Options for filtering which radio button instances are considered a match. |
Returns | |
HarnessPredicate<T>
|
a |
Interfaces
RadioGroupHarnessFilters
A set of criteria that can be used to filter a list of MatRadioGroupHarness
instances.
Properties
Name | Description |
---|---|
|
Only find instances whose name attribute is the given value. |
RadioButtonHarnessFilters
A set of criteria that can be used to filter a list of MatRadioButtonHarness
instances.
Properties
Name | Description |
---|---|
|
Only find instances with the given checked value. |
|
Only find instances whose label matches the given value. |
|
Only find instances whose name attribute is the given value. |