Default value for toggle button in angular

Question

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.

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. @VimalPatel — user10183910
– user10183910, Commented Dec 10, 2020 at 11:54

Vimal Patel · Accepted Answer · 2020-12-10 12:02:36Z

1

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.

answered Dec 10, 2020 at 12:02

Vimal Patel

3,1152 gold badges27 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

app Over a year ago

,I have one question in regards to the angular material table can you please help here. stackoverflow.com/questions/65347251/…

Hamza Haddad Over a year ago

I way to default select multiple values

Vimal Patel Over a year ago

@HamzaHaddad Can you explain your problem statement in detail?

Collectives™ on Stack Overflow

Default value for toggle button in angular

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related