Reputation: 21
I have a toggle button with multiple options. I have to set a default option to be true to begin with and this value has to be returned. I implement the button in this way
<form novalidate>
<mat-button-toggle-group name="testSelect" [(ngModel)]="testSelect">
<mat-button-toggle *ngFor="let item of options" [nxValue]="item.headline">
{{ item.headline }}
</mat-button-toggle>
</mat-button-toggle-group>
<p>
Current Value: {{ testSelect }}
</p>
</form>
ts
export class CComponent{
testSelect: string;
options = [
{
headline: 'apple'
},
{
headline: 'mango'
},
{
headline: 'orange'
}
];
}
Regarding the default option, I want the last option of the group to be preselected and its value must be recorded. Now in my case, the value is recorded only after a button is selcted.
Upvotes: 0
Views: 3465
Reputation: 3085
You can use value
attribute for default selection.
<mat-button-toggle-group name="testSelect" [(ngModel)]="testSelect" value="textSelect">
<mat-button-toggle *ngFor="let item of options" [value]="item.headline">
{{ item.headline }}
</mat-button-toggle>
</mat-button-toggle-group>
And in your component assign the value to textSelect
which you want as default selected.
testSelect: string="orange";
Reference from this answer Link.
Upvotes: 1