Angular 5, HTML, boolean on checkbox is checked - html

Question

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 class="even" *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'">

Answer 1

try:
[checked]="item.checked"
check out: How to Deal with Different Form Controls in Angular

Answer 2

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.

Answer 3

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">

Answer 4

Hope this will help somebody to develop custom checkbox component with custom styles. This solution can use with forms too.
HTML
<label class="lbl">
<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 class="chk-box {{isChecked ? 'chk':''}}"></span>
<span class="lbl-txt" *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>

Answer 5

Here is my answer,
In row.model.ts
export interface Row {
otherProperty : type;
checked : bool;
otherProperty : type;
...
}
In .html
<tr class="even" *ngFor="let item of rows">
<input [checked]="item.checked" type="checkbox">
</tr>
In .ts
rows : Row[] = [];
update the rows in component.ts

Answer 6

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()">

Answer 7

[checked]= "isChecked"
This isChecked will be your varaible of type boolean in component.ts file i.e
if you setb isChecked variable to true in component.ts ts checkbox will be checked and vice versa.

Answer 8

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