Menu
How can I set default selected last button in toggle group.
This is my code.
<mat-button-toggle-group #group="matButtonToggleGroup"> <mat-button-toggle value="Heritage"> <span>Heritage</span> </mat-button-toggle> <mat-button-toggle value="Nature"> <span>Nature</span> </mat-button-toggle> <mat-button-toggle value="People"> <span>People</span> </mat-button-toggle> <mat-button-toggle value="All"> <span>All</span> </mat-button-toggle> </mat-button-toggle-group> 
414
You can use value attribute for default selection. And in your component assign the value to textSelect which you want as default selected. testSelect: string="orange"; Reference from this answer Link.
By default, mat-button-toggle-group acts like a radio-button group- only one item can be selected. In this mode, the value of the mat-button-toggle-group will reflect the value of the selected button and ngModel is supported. Adding the multiple attribute allows multiple items to be selected (checkbox behavior).
To create a toggle button or on/off button with angular material design and animations, the Angular <mat-button-toggle> directive is used. These buttons can be configured to behave like either radio buttons or checkboxes so that a single selection or multiple selections can be done on the buttons.
The <mat-button-toggle>, an Angular Directive, is used to create a toggle or on/off button with material styling and animations. mat-button-toggle buttons can be configured to behave as radio buttons or checkboxes.
I fixed it. Simply add the value attribute to the mat-button-toggle-group tag.
<mat-button-toggle-group #group="matButtonToggleGroup" value="All"> <mat-button-toggle value="Heritage"> <span>Heritage</span> </mat-button-toggle> <mat-button-toggle value="Nature"> <span>Nature</span> </mat-button-toggle> <mat-button-toggle value="People"> <span>People</span> </mat-button-toggle> <mat-button-toggle value="All"> <span>All</span> </mat-button-toggle> Hope this will help someone.
public selectedVal: string; constructor() { } ngOnInit(){ this.selectedVal ='option1'; } public onValChange(val: string) { this.selectedVal = val; } <mat-button-toggle-group #group="matButtonToggleGroup" [value]="selectedVal" (change)="onValChange(group.value)" > <mat-button-toggle value="option1"> Option 1 </mat-button-toggle> <mat-button-toggle value="option2"> Option 2 </mat-button-toggle> </mat-button-toggle-group> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
