Angular - флажок в повторно используемом компоненте, передающий логическую переменную обратно в родительский компонент

Question

Я пытаюсь переместить флажок, который у меня был ранее в основном компоненте, к новому компоненту, который может быть компонентом многократного использования. Я не знаю, что я делаю неправильно, но мне кажется, что я не могу вернуться к значению основного компонента флажка (true или false).

main.component.ts

testCheckboxValue = false;
labelForCheckbox = 'Here is my checkbox';

main.component. html

<app-checkbox-custom [checkboxLabelName]="labelForCheckbox" [checkboxLabelData]="testCheckboxValue "></app-checkbox-custom>

checkbox-custom.component.ts

 @Input() checkboxLabelName;
 @Input() checkboxLabelData;

checkbox-custom.component.ts

<div class="label-settings">
    <input type="checkbox" name="checkboxLabelData" [checked]="checkboxLabelData" (change)="checkboxLabelData = !checkboxLabelData" />
    <div class="state">
        <label>
            {{checkboxLabelName}}
        </label>
    </div>
</div>

Когда я сохранил это в одном компоненте, все работало, сейчас, похоже, мой main.component не знает, когда для chechbox установлено значение true или false.