Toggle Button doesn't highlight the selected value if it is a number

Bug, feature request, or proposal:

Bug (regression?)

What is the expected behavior?

Before the rewrite of the button toggle class it seemed to try to coerce values when comparing them so you could set the value of a button like value="1" and it would see that button as the selected one when the model behind had a value of 1.

What is the current behavior?

It now does an exact comparison to the model behind and won’t select the button with value="1" if the model has that value.

What are the steps to reproduce?

https://stackblitz.com/edit/angular-wwwlek?file=app%2Fbutton-toggle-exclusive-example.html

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 6, Material 6

Is there anything else we should know?

Maybe this is the way we want it to work, it was just a change that wasn’t really documented and happened to break part of my site. Feel free to close this if it’s how you want this to work, I was mainly putting this here so it might show up in someone else’s search results since there is a work around.

In my project I have a list of parts that have some status codes associated with them when they do some service. These codes are stored in the system as numbers, but the codes that are possible don’t change so I had something like this (greatly simplified here):

           <mat-button-toggle-group [(ngModel)]="part.code">
                <mat-button-toggle *ngIf="part.allowNa" value="-1">N/A</mat-button-toggle>
                <mat-button-toggle class="good" value="0">Good</mat-button-toggle>
                <mat-button-toggle class="bad" value="1">Replaced</mat-button-toggle>
            </mat-button-toggle-group>

This no longer works as it doesn’t see 1 as being equal to "1" and there’s no way to say “this value is a number not a string” when you define it in the HTML. The work around is to do this:

naVal = -1;
goodVal = 0;
badVal = 1;
...
           <mat-button-toggle-group [(ngModel)]="part.code">
                <mat-button-toggle *ngIf="part.allowNa" [value]="naVal">N/A</mat-button-toggle>
                <mat-button-toggle class="good" [value]="goodVal">Good</mat-button-toggle>
                <mat-button-toggle class="bad" [value]="badVal">Replaced</mat-button-toggle>
            </mat-button-toggle-group>

This is probably a better way of doing it anyways since badVal means more to someone else reading this than 1 does. Just raising this in case it wasn’t intentional

[josephperrott]

Closing, as you noted this working as expected. If it was not working this way in the past, then the change in behavior should be considered a bug fix.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}