md-button-toggle

MdButtonToggle is a group of buttons that can be toggled. There are two modes, multiple and exclusive. When in 'exclusive' mode, only one button can be selected at a time (like radio buttons). When in 'multiple' mode, multiple buttons can be selected at once (like checkboxes). You can read more about button toggles in the Material Design spec.

Usage

Setup

Importing the module:

 @NgModule({
    imports: [MdButtonToggleModule],
    ...
 })
 export class MyAppModule { }

Basic Usage

md-button-toggle can be used on its own and acts as a checkbox.

<md-button-toggle>Bold</md-button-toggle>

Output:

Exclusive Selection

md-button-toggle can be used in an exclusive selection group when surrounded by md-button-toggle-group. This styles all buttons within the group to appear as a single group of button toggles and allows only one button toggle to be selected at a time.

<md-button-toggle-group name="alignment">
    <md-button-toggle value="left"><md-icon>format_align_left</md-icon></md-button-toggle>
    <md-button-toggle value="center"><md-icon>format_align_center</md-icon></md-button-toggle>
    <md-button-toggle value="right"><md-icon>format_align_right</md-icon></md-button-toggle>
    <md-button-toggle value="justify"><md-icon>format_align_justify</md-icon></md-button-toggle>
</md-button-toggle-group>

Output:

Multiple Selection

md-button-toggle can be used in a multiple selection group when surrounded by md-button-toggle-group multiple. This styles all buttons within the group to appear as a single group of button toggles.

<md-button-toggle-group multiple>
    <md-button-toggle>Flour</md-button-toggle>
    <md-button-toggle>Eggs</md-button-toggle>
    <md-button-toggle>Sugar</md-button-toggle>
    <md-button-toggle>Milk</md-button-toggle>
</md-button-toggle-group>

Output:

Dynamic Exclusive Selection

md-button-toggles can be used with ngModel to dynamically create groups and update the value for a group.

<md-button-toggle-group name="pies" [(ngModel)]="favoritePie">
    <md-button-toggle *ngFor="let pie of pieOptions" [value]="pie">
        {{pie}}
    </md-button-toggle>
</md-button-toggle-group>
<p>Your favorite type of pie is: {{favoritePie}}</p>

Disabled Button Toggle

md-button-toggle-group and md-button-toggle can both be disabled by adding a disabled attribute to either one. Adding disabled to an exclusive group or a multiple group will disable the entire group. Adding disabled to a single toggle will disable that toggle.

<md-button-toggle-group disabled>
    <md-button-toggle value="one">One</md-button-toggle>
    <md-button-toggle value="two">Two</md-button-toggle>
    <md-button-toggle value="three">Three</md-button-toggle>
</md-button-toggle-group>

<md-button-toggle-group>
    <md-button-toggle value="red" disabled>Red</md-button-toggle>
    <md-button-toggle value="blue">Blue</md-button-toggle>
</md-button-toggle-group>

Output:

<md-button-toggle>

Bound Properties

| Name | Type | Description | | --- | --- | --- | | id | string | The unique ID of the toggle. IDs are generated by default when not specified. | | name | string | Optional, defaults to parent group name if one exists for exclusive selection toggles, otherwise null. This is used to differentiate between different groups. | | value | any | Value of the toggle. Only used when in a group to determine which are selected. | | checked | boolean | Optional, default = false. Whether or not the toggle is checked. | | disabled | boolean | Optional, default = false. Whether or not the toggle is disabled |

Events

| Name | Description | | --- | --- | | change | Emitted when the checked value is changed. |

<md-button-toggle-group>

Bound Properties

| Name | Type | Description | | --- | --- | --- | | name | string | Optional, the name of the group. | | disabled | boolean | Optional, default = false. | | value | any | The current value for the group. Will be set to the value of the selected toggle or a list of values from the selected toggles. | | selected | mdButtonToggle | The current selected toggle or a list of the selected toggles. |

Attributes

| Name | Type | Description | | --- | --- | --- | | multiple | boolean | Optional, default = false. Whether or not the group allows multiple selection. |

Events

| Name | Description | | --- | --- | | change | Emitted when the value of the group changes. |