Angular 5, HTML, boolean on checkbox is checked

Angular 5, Typescript 2.7.1

I can't seem to get the checkbox to be checked when returning a boolean, I've tried, item.check returns either true or false.

<tr *ngFor="let item of rows"> <input value="{{item.check}}" type="checkbox" checked="item.check"> 

The checkbox is always checked when checked is written inside input. And it does not get unchecked when checked="false".

Is there a better way to do it with Angular features instead? like ngModel or ngIf???

Solution

<input type="checkbox" [checked]="item.check == 'true'"> 

6 Answers

try:

[checked]="item.checked" 

check out: How to Deal with Different Form Controls in Angular

You can use this:

<input type="checkbox" [checked]="record.status" (change)="changeStatus(record.id,$event)"> 

Here, record is the model for current row and status is boolean value.

When you have a copy of an object the [checked] attribute might not work, in that case, you can use (change) in this way:

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

Hope this will help somebody to develop custom checkbox component with custom styles. This solution can use with forms too.

HTML

<label> <input #inputEl type="checkbox" [name]="label" [(ngModel)]="isChecked" (change)="onChange(inputEl.checked)" *ngIf="isChecked" checked> <input #inputEl type="checkbox" [name]="label" [(ngModel)]="isChecked" (change)="onChange(inputEl.checked)" *ngIf="!isChecked" > <span></span> <span *ngIf="label" >{{label}}</span> </label> 

checkbox.component.ts

 import { Component, Input, EventEmitter, Output, forwardRef, HostListener } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; const noop = () => { }; export const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR: any = { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => CheckboxComponent), multi: true }; /** Custom check box */ @Component({ selector: 'app-checkbox', templateUrl: './checkbox.component.html', styleUrls: ['./checkbox.component.scss'], providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR] }) export class CheckboxComponent implements ControlValueAccessor { @Input() label: string; @Input() isChecked = false; @Input() disabled = false; @Output() getChange = new EventEmitter(); @Input() className: string; // get accessor get value(): any { return this.isChecked; } // set accessor including call the onchange callback set value(value: any) { this.isChecked = value; } private onTouchedCallback: () => void = noop; private onChangeCallback: (_: any) => void = noop; writeValue(value: any): void { if (value !== this.isChecked) { this.isChecked = value; } } onChange(isChecked) { this.value = isChecked; this.getChange.emit(this.isChecked); this.onChangeCallback(this.value); } // From ControlValueAccessor interface registerOnChange(fn: any) { this.onChangeCallback = fn; } // From ControlValueAccessor interface registerOnTouched(fn: any) { this.onTouchedCallback = fn; } setDisabledState?(isDisabled: boolean): void { } } 

checkbox.component.scss

 @import "../../../assets/scss/_variables"; /* CHECKBOX */ .lbl { font-size: 12px; color: #282828; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; cursor: pointer; &.checked { font-weight: 600; } &.focus { .chk-box{ border: 1px solid #a8a8a8; &.chk{ border: none; } } } input { display: none; } /* checkbox icon */ .chk-box { display: block; min-width: 15px; min-height: 15px; background: url('/assets/i/checkbox-not-selected.svg'); background-size: 15px 15px; margin-right: 10px; } input:checked+.chk-box { background: url('/assets/i/checkbox-selected.svg'); background-size: 15px 15px; } .lbl-txt { margin-top: 0px; } } 

Usage

Outside forms

<app-checkbox [label]="'Example'" [isChecked]="true"></app-checkbox> 

Inside forms

<app-checkbox [label]="'Type 0'" formControlName="Type1"></app-checkbox> 

Here is my answer,

In row.model.ts

export interface Row { otherProperty : type; checked : bool; otherProperty : type; ... } 

In .html

<tr *ngFor="let item of rows"> <input [checked]="item.checked" type="checkbox"> </tr> 

In .ts

rows : Row[] = [];

update the rows in component.ts

Work with checkboxes using observables

You could even choose to use a behaviourSubject to utilize the power of observables so you can start a certain chain of reaction starting at the isChecked$ observable.

In your component.ts:

public isChecked$ = new BehaviorSubject(false); toggleChecked() { this.isChecked$.next(!this.isChecked$.value) } 

In your template

<input type="checkbox" [checked]="isChecked$ | async" (change)="toggleChecked()">