The <mat-button-toggle> are on/off toggles with the appearance of
buttons. These toggles can be
configured to behave as either check-boxes
or radio-buttons based on multiple
attribute.
For button toggles - It containing only icons and each button
toggle should be given a meaningful label -
1.
aria-label or
2.
aria-labelledby
For button toggle groups - each group should be given a
meaningful label -
1.
aria-label or
2.
aria-labelledby
The Example in detail -
button-toggle.html
–
<mat-button-toggle-group
#group="matButtonToggleGroup">
<mat-button-toggle
value="left">
<mat-icon>format_align_left</mat-icon>
</mat-button-toggle>
<mat-button-toggle
value="center">
<mat-icon>format_align_center</mat-icon>
</mat-button-toggle>
<mat-button-toggle
value="right">
<mat-icon>format_align_right</mat-icon>
</mat-button-toggle>
<mat-button-toggle
value="justify"
disabled>
<mat-icon>format_align_justify</mat-icon>
</mat-button-toggle>
</mat-button-toggle-group>
<div>Result
- the selected value is - {{group.value}}</div>
button-toggle.ts
-
import
{Component} from
'@angular/core';
/**
* Exclusive selection
*/
@Component({
selector: 'button-toggle',
templateUrl: 'button-toggle.html',
styleUrls: ['button-toggle.css'],
})
export
class ButtonToggle
{}
app.module.ts –
import
{NgModule} from
'@angular/core';
import
{CdkTableModule} from
'@angular/cdk/table';
import
{HttpClientModule} from
'@angular/common/http';
import
{FormsModule, ReactiveFormsModule}
from '@angular/forms';
import
{HttpModule} from
'@angular/http';
import
{BrowserModule} from
'@angular/platform-browser';
import
{platformBrowserDynamic}
from '@angular/platform-browser-dynamic';
import
{BrowserAnimationsModule}
from '@angular/platform-browser/animations';
import
{ButtonToggle} from
'./app/button-toggle';
import
{
MatAutocompleteModule,
MatButtonModule,
MatButtonToggleModule,
MatCardModule,
MatCheckboxModule,
MatChipsModule,
MatDatepickerModule,
MatDialogModule,
MatDividerModule,
MatExpansionModule,
MatGridListModule,
MatIconModule,
MatInputModule,
MatListModule,
MatMenuModule,
MatNativeDateModule,
MatPaginatorModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatRadioModule,
MatRippleModule,
MatSelectModule,
MatSidenavModule,
MatSliderModule,
MatSlideToggleModule,
MatSnackBarModule,
MatSortModule,
MatStepperModule,
MatTableModule,
MatTabsModule,
MatToolbarModule,
MatTooltipModule,
} from
'@angular/material';
@NgModule({
exports: [
CdkTableModule,
MatAutocompleteModule,
MatButtonModule,
MatButtonToggleModule,
MatCardModule,
MatCheckboxModule,
MatChipsModule,
MatStepperModule,
MatDatepickerModule,
MatDialogModule,
MatDividerModule,
MatExpansionModule,
MatGridListModule,
MatIconModule,
MatInputModule,
MatListModule,
MatMenuModule,
MatNativeDateModule,
MatPaginatorModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatRadioModule,
MatRippleModule,
MatSelectModule,
MatSidenavModule,
MatSliderModule,
MatSlideToggleModule,
MatSnackBarModule,
MatSortModule,
MatTableModule,
MatTabsModule,
MatToolbarModule,
MatTooltipModule,
]
})
export
class DemoMaterialModule
{}
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
HttpModule,
HttpClientModule,
DemoMaterialModule,
MatNativeDateModule,
ReactiveFormsModule,
],
entryComponents: [ButtonToggle],
declarations: [ButtonToggle],
bootstrap: [ButtonToggle],
providers: []
})
export
class AppModule
{}
platformBrowserDynamic().bootstrapModule(AppModule);
The Result looks like - https://stackblitz.com/edit/angular-vuktys-tvs257