unchecking a checkbox from a button Angular2

Question

I am developing a project using Angular2. I have a list called brands which contain other list called descriptions.

this list will create checkboxes:

<div *ngFor="let brand of brands">
    {{ brand.category }}
    <div*ngFor="let description of brand.descriptions" >
        <input type="checkbox" name="checkbox" />{{ description.value }}
    </div>
</div>

and I have two text boxes:

<input name="brand" />
<input name="description" />
<button>uncheck</button>

the button event will uncheck only the checkbox with the brand and the description that mentioned in the input without changing or rebuilding the list because I need to keep checkboxes' status correct.

any idea?

Answer 1

To have two-way data-binding you need to assign the value to your model.

<input [(ngModel)]="checkboxFlag" type="checkbox"/>

This answers your question

Answer 2

You will need to hold the value of it somewhere, like add the field isChecked to the description object and then bind it like Gabriel said.

<input [(ngModel)]="description.isChecked" type="checkbox"/>

Answer 3

I found a solution, I just have to give the checkboxes an Id then I will change call it from typescript:

    <div *ngFor="let brand of brands">
        {{ brand.category }}
        <div*ngFor="let description of brand.descriptions" >
            <input type="checkbox" name="checkbox"
             [id]="brand.category.replace(' ', '') + description.value.replace(' ','')"/>
            {{ description.value }}
        </div>
    </div>

and then from typescript:

onclick(category, description) {
  const element = <HTMLInputElement> document.getElementById(category.replace(' ', '') + description.replace(' ', ''));
  element.checked = false;
}