Formatting of matInput formatting changes when changing class name

When I try and set a matInput's class to a value using "{{}}", it changes the formatting for some reason. Here's the code with curly braces plus what it looks like.

<mat-tab label="1">
  <div *ngFor="let name of playerAndID">
    <h3>{{ name.name }}</h3>
    <mat-form-field class="scoreInput">
      <input matInput placeholder="Score" class="{{name.index}}">
    </mat-form-field>
  </div>
</mat-tab>

If I change the class name to anything else, it displays normally. Here's what it looks like, as well as the code:

<mat-tab label="1">
  <div *ngFor="let name of playerAndID">
    <h3>{{ name.name }}</h3>
    <mat-form-field class="scoreInput">
      <input matInput placeholder="Score" class="ANYTHING ELSE">
    </mat-form-field>
  </div>
</mat-tab>

How can I prevent this from happening when using the curly braces? This issue doesn't happen in any other part of my application.

It seems like when you specify the class using {{}}, it overrides the default one of "mat-input-element mat-form-field-autofill-control cdk-text-field-autofill-monitored". I was able to fix the formatting issue by changing the Id instead.