Warm tip: This article is reproduced from stackoverflow.com, please click
angular angular-material angular5

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

发布于 2020-03-28 23:13:36

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>
Questioner
Hossein Bajan
Viewed
407
分享
4,673 2019-08-09 02:49

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>

user5988442 2017-12-29 20:05:56

I vote up but you may also see on github

Related issues

1
NGXS How to trigger Angular re-render after asynchronous call?
2
Change fixture response in cypress for the same url with intercept
3
Populate data in an Observable based on data in the Observable itself
4
Angular 11 HttpClient Generic Observable map service values into a Class
5
using variable after the subscribe block angular ionic
6
Customize algolia's search box in angular
7
Ngfor to array and access via ngif
8
What is the TsLint rule name for breaking lambda expression arrow?
9
How to to display array of objects of array in *ngfor
10
Overriding the encapsulated CSS of external component