Get checkbox value from HTML in Angular 2 typescript.

Question

I have two checkboxes in my html as follows:

<label><input type="checkbox" id="checkbox1" /> Folder 1: </label>
<label><input type="checkbox" id="checkbox2" /> Folder 2: </label>

but I'm unsure of how to retrieve the checkbox values inside my Typescript file. I know I can accomplish this by calling a separate function for each checkbox and changing a value within my typescript. However, that doesn't seem like the best way - if I had ten different checkboxes then I would need 10 different functions in my typescript.

Is there a simply way to get whether the checkbox is on or off based on the id? Is there a better way than that?

Answer 1

If you want to two-way-bind the checkbox, you should use ngModel binding.

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

and in your component's class:

export class AppComponent { 
  checkboxValue: boolean = false;
}

Answer 2

you may bind to checked property of input element like below,

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>
  <label><input type="checkbox" [checked]="checkbox1" /> Folder 1: </label>
<label><input type="checkbox" [checked]="checkbox2" /> Folder 2: </label>
  `
})
export class AppComponent { 
  name = 'Angular'; 
  checkbox1 = false;
  checkbox2 = true;
}

Here is the Plunker.

Hope this helps!!