When selected, for example Light theme, we expect { backgroundColor: 'white', fontColor: 'black', display: 'Light' } to be returned. Instead of binding to the value property, we bind to ngValue property.

First, we define a hidden input to bind to the real model. Then we create the checkbox input, handle the checked property and change event. Change event fire every time value change, and it has $event that we can read from.

In our case, we read the $event.target.checked to find out if the checkbox is checked, then update model value accordingly.