How to mat-button-toggle by default selected in angular

Question

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>

score 105 · Accepted Answer · edited Aug 08 '19 at 18:49

105

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>

edited Aug 08 '19 at 18:49

Marcos Dimitrio

6,651
5
38
62

answered Dec 27 '17 at 11:49

Hossein Bajan

2,644
5
19
36

1

I vote up but you may also see on [github](https://github.com/angular/angular/issues/20793) – Dec 29 '17 at 12:05

Uliana Pavelko · Answer 2 · 2018-03-27T18:30:51.477

55

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>

edited Mar 27 '18 at 18:30

answered Mar 27 '18 at 16:14

Uliana Pavelko

2,824
28
32

1

very nice thanks! the binding to the component.ts was the tricky part. – C. Tewalt Mar 12 '19 at 12:52
How can i set multiple selected values initially for button group? – Sarower Jahan Jan 30 '20 at 09:34

score 11 · Answer 3 · edited Jan 31 '20 at 10:01

@Uliana Pavelko's answer is awesome. But what would be for multiple selected button group?

Bellow is the example. Don't forget to pass values as string in

public selectedVal: string;
constructor() { }

ngOnInit(){
  this.selectedVal =['2','6'];
}

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>

score 3 · Answer 4 · edited Mar 27 '20 at 02:13

3

For people using a FormBuilder, I propose to fill the default value from .ts file

example:

formControlName : ['All', Validators.required]

edited Mar 27 '20 at 02:13

Joe Mayo

7,501
7
41
60

answered Mar 26 '20 at 22:45

Salahddine Zridi

45
3

score 1 · Answer 5 · answered Mar 09 '21 at 20:22

In case someone got stuck on this. I save the object on my value attribute and set the checked attribute for index === 0.

<mat-button-toggle [value]="object" *ngFor="let object of objectsList; let i = index" [checked]="i === 0">{{object.name }}</mat-button-toggle>

score 0 · Answer 6 · edited Oct 19 '21 at 04:17

In case you are using formcontrolName and it still doesn't take your byDefault value, then try this, it works for me:

<mat-button-toggle-group formControlName="boolValue" aria-label="Font Style">
    <mat-button-toggle value="false" [ngClass]="Form.controls['boolValue'].value ? '':'active'">Disable</mat-button-toggle>
    <mat-button-toggle value="true" [ngClass]="Form.controls['boolValue'].value ? 'active':''">Enable</mat-button-toggle>
</mat-button-toggle-group>

style.css

.active {background-color: #e0e0e0 !important;}

score 0 · Answer 7 · answered Feb 08 '22 at 15:07

Don't forget to import MatButtonToggleModule in your module.ts

Use formControlName to link the form to the button toggle

test.component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
    selector: 'app-test',
    templateUrl: './test.component.html',
    styleUrls: ['./test.component.scss']
})
export class TestComponent implements OnInit {
    public form: FormGroup;

    constructor(private formBuilder: FormBuilder) {
        this.form = this.formBuilder.group({
            choices: [1] // <-- Default value 1
        });
    }

    ngOnInit(): void {}
}

test.component.html

<form [formGroup]="form">
    <mat-button-toggle-group formControlName="choices">
        <mat-button-toggle [value]="1">Choice 1</mat-button-toggle>
        <mat-button-toggle [value]="2">Choice 2</mat-button-toggle>
        <mat-button-toggle [value]="3">Choice 3</mat-button-toggle>
    </mat-button-toggle-group>
</form>

Works fine with Angular 12

How to mat-button-toggle by default selected in angular

7 Answers7

Linked