NgModel not updating model in checkbox

Question

I have a model that basically is a list of objects, and each of this objects contains a boolean value. These boolean values must be updatable by the user so I wrote a component that creates a checkbox for each object and then I bind this checkbox with the model behind it.

This however is not working! If I check a checkbox, the model it is bound to seems to not be updated at all.

To illustrate my problem, I created a minimal working example:

import {Component, Input, OnInit} from '@angular/core';

@Component({
    selector: 'component-test',
    template: `
        <div *ngIf="!!data">
            <div *ngFor="let item of data">
                <ion-checkbox ([ngModel])="item.checked"></ion-checkbox>
            </div>
        </div>
        <ion-button (click)="console_log()">print output</ion-button>
    `
})
export class TestComponent {
    @Input() data: any;

    console_log() {
        console.log(this.data);
    }
}


@Component({
    selector: 'page-test',
    template: `
        <ion-header>
            <ion-toolbar color="primary">
                <ion-title>
                    Test
                </ion-title>
            </ion-toolbar>
        </ion-header>
        <ion-content>
            <component-test [data]="params.data | async"></component-test>
        </ion-content>
    `
})
export class TestPage implements OnInit {

    params: any = {};

    async get_data() {
        return [{checked: false}, {checked: false}, {checked: false}];
    }

    ngOnInit() {
        this.params['data'] = this.get_data();
    }
}

As you can see:

• the data is asynchronously loaded in a parent component (page-test)
• the data is passed to a testcomponent (which contains the checkboxes) (component-test)
• I added a button that outputs the data in the console to verify the current state of the model.

The expected behaviour:

• when I toggle a checkbox, the boolean in the model should mirror the state of the checkbox and vice versa

The observed behaviour:

• When I toggle a checkbox and output the model to the console, I observe no change at all.

Answer 1

The ngModel syntax is wrong because of this the checkbox value is not binded, so please change it like this

<div *ngIf="!!data">
            <div *ngFor="let item of data">
                <ion-checkbox [(ngModel)]="item.checked"></ion-checkbox>
            </div>
        </div>