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
|
Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
|