Запретить загрузчику 4 автоматически добавлять активный класс к кнопке с флажком

Question

Я хочу создать пользовательский угловой компонент флажка.Моя проблема в том, что JavaScript начальной загрузки каким-то образом автоматически добавляет имя класса active к кнопке при ее нажатии и сохраняет его там.Когда я нажимаю на ярлык флажка, все работает нормально.Проблема только тогда, когда я нажимаю на флажок.Можно ли как-то предотвратить это?

Вот рабочий пример .

Мой пользовательский компонент выглядит так:

checkbox.component.html

<div class="checkbox btn-group-toggle" data-toggle="buttons" (click)="onClick($event)">
<label class="checkbox-input btn btn-xs"
[ngClass]="{'btn-primary active': value, 'btn-outline-secondary': !value}">
    <input type="checkbox" [checked]="value" autocomplete="off">
    <i class="fas fa-check" [ngClass]="{'fa-invisible': !value}"></i>
</label>
<label class="checkbox-label" *ngIf="label">{{ label }}</label>

checkbox.component.ts

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

@Component({
    selector: "checkbox",
    templateUrl: "./checkbox.component.html"
})
export class CheckboxComponent {

@Output()
public valueChange: EventEmitter<boolean> = new EventEmitter();

@Input()
public value: boolean = false;

@Input()
public label: string;

// ToDo: if the user un-selects checkbox by clicking directly on checkbox, the class "active" remains on element

public constructor() {}

public onClick(event: MouseEvent): void {

  event.preventDefault();

    this.value =! this.value;

    this.valueChange.emit(this.value);
}

} ​​