btn-group - btnRadio initial value done by enum, does not activate the button

Question

I have following btn-group:

<div class="btn-group">
      <label class="btn btn-primary" [(ngModel)]="type" btnRadio="{{myType.A}}" name="A" ngDefaultControl>A</label>
      <label class="btn btn-primary" [(ngModel)]="type" btnRadio="{{myType.B}}" name="B" ngDefaultControl>B</label>
</div>

MyType is an enum:

export enum MyType {
    A, B
}

and here is the component:

@Component({
  selector: 'add-record',
  templateUrl: './add-record.component.html',
  styleUrls: ['./add-record.component.css']
})
export class AddRecordComponent implements OnInit {

  type: MyType;
  myType = MyType;

  constructor() { }

  ngOnInit() {
    this.type = MyType.A;
  }
}

As you can see the initial value of type is MyType.A so I would expect that the first button will be active, but it's not.

I expect:

I have:

Answer 1

You will have to add the "active" class to one of the labels:

<div class="btn-group">
    <label class="btn btn-primary" [(ngModel)]="type" [class.active]="type=myType.A" btnRadio="{{myType.A}}" name="A" ngDefaultControl>A</label>
    <label class="btn btn-primary" [(ngModel)]="type" [class.active]="type=myType.B" btnRadio="{{myType.B}}" name="B" ngDefaultControl>B</label>
 </div>