Estou trabalhando em um pequeno componente reutilizável que estiliza botões de opção e emite os valores selecionados.

import { Component, OnInit, Input, Output, EventEmitter } from "@angular/core";

@Component({
    moduleId: module.id,
    selector: 'button-select',
    template: `<div class="toggle-group">
                    <div *ngFor="let choice of choices">
                        <input type="radio"
                               id="{{ groupName + choice }}"
                               name="{{groupName}}"
                               value="{{ choice }}"
                               [checked]="choice === defaultChoice"
                               [(ngModel)]="value"
                               (ngModelChange)="choose($event)" />
                        <label class="toggle-button"
                               for="{{ groupName + choice }}">{{ choice }}</label>
                    </div>
                </div>`,
    styleUrls: [
        'editableField.css',
        'buttonSelect.css'
    ]
})

export class ButtonSelectComponent implements OnInit {
    @Input() choices: string[];
    @Input() defaultChoice: string;
    @Input() groupName: string;
    @Input() value: string;

    @Output() valueChosen: EventEmitter<any> = new EventEmitter();

    ngOnInit() {
        this.choose(this.defaultChoice);
    }

    private choose(value: string) {
        this.valueChosen.emit(value);
    }
}

O componente é implementado da seguinte forma:

<button-select #statusFilter
               [choices]="['All', 'Active', 'Draft']"
               [defaultChoice]="'All'"
               [groupName]="'statusFilter'"
               (valueChosen)="filterChosen('statusFilter', $event)"
</button-select>

Antes adicionando[(ngModel)]="value" (ngModelChange)="choose($event)" ao componente de seleção de botão, o[checked]="choice === defaultChoice" diretiva defina corretamente ochecked atributo no relevante<input />.

Depois de adicionando o[(ngModel)], só ng-reflect-checked="true" é definido, o que impede que o estilo visual mostre o valor padrão (já que meu CSS usa um pseudo-seletor).

Mudando[(ngModel)] para[ngModel] não teve efeito.

Por que isso aconteceu e como posso corrigi-lo?