The
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-togglevalue="left">
mat-icon>format_align_leftmat-icon>
mat-button-toggle>
mat-button-togglevalue="center">
mat-icon>format_align_centermat-icon>
mat-button-toggle>
mat-button-togglevalue="right">
mat-icon>format_align_rightmat-icon>
mat-button-toggle>
mat-button-togglevalue="justify"disabled>
mat-icon>format_align_justifymat-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'],
})
exportclass 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,
]
})
exportclass DemoMaterialModule{}
@NgModule({
