Angular 5, HTML, boolean on checkbox is checked

Advanced checkbox science

Armed with the knowledge of [(ngModel)]? Grand! Let's unhinge more complex and fruitful approaches:

Properties vs attributes

In Angular, [checked]="item.checked" binds the checkbox property to your model's boolean:

<input type="checkbox" [checked]="item.checked" (change)="item.checked = !item.checked" />


You might say it's like having your model as your personal checkbox status-desk. No more checked="item.checked", just [checked]="item.checked".

Reactive forms – it's alive!

Reactive forms, say hello to checkboxes:

this.form = this.fb.group({
  acceptTerms: [false, Validators.requiredTrue]
});


<input type="checkbox" formControlName="acceptTerms" />


Did you see that Validators.requiredTrue? It's a sentinel, making sure the checkbox is checked for form submission.

Custom checkbox, custom fun

Sometimes, you need a custom checkbox. Use Angular's ControlValueAccessor interface to make them form-friendly:

@Component({
  selector: 'app-custom-checkbox',
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => CustomCheckboxComponent),
      multi: true
    }
  ],
  template: `
    <input type="checkbox" (change)="onChange($event.target.checked)" [checked]="checked">
  `
})
export class CustomCheckboxComponent implements ControlValueAccessor {
  checked = false;
  onChange: (_: any) => void = (_: any) => {};

  writeValue(val: any): void { // Welcome, value!
    this.checked = val;
  }

  registerOnChange(fn: any): void { // Registering changes like a VIP club 🎩
    this.onChange = fn;
  }

  registerOnTouched(fn: any): void {}
}


What you see is a ControlValueAccessor illustrating a command performance for a checkbox.

Checkbox cohorts

For multiple checkboxes, give ngFor a ride:

<div *ngFor="let option of options; let i = index">
  <input type="checkbox" [checked]="option.selected" (change)="options[i].selected = !options[i].selected">
  {{ option.name }}
</div>


Each checkbox is now ballroom dancing with the object in the options array.

Pro tips and code etiquette

Here are quick tips and guidelines to avoid any uninvited bugs within your Angular code:

Literal tragedy

Avoid literals like checked="true" in templates - it's bad manners. Use binding to a component property instead.

State synchronization

When handling checkbox change event, be sure to keep boolean values in agreement to avoid potential chaos:

<input type="checkbox" [checked]="item.selected" (change)="itemToggle(item)">


itemToggle(item: any) {
  item.selected = !item.selected; // Like flipping a pancake 🥞
  // Some more code...
}


Event-driven excellence

Angular swings with event-driven architecture. Use EventEmitter to emit checkbox changes like a DJ.

Following form norms

Stick with Angular's forms handling best practices for smoother form validation and submission.