Checked and unchecked checkbox in Angular 2 by boolean value

Question

I would like to make checkbox in Angular 2 automatically checked or unchecked. When the value is 1 the checkbox will check and this one is 0 the checkbox will automatically uncheck.

public LightControl() {
    this.dataLight = this._LightService.AutoLightController(this._ConnectService.SocketInstanse())
        .subscribe(data => {
            this.temp = JSON.stringify(data['status']);
        })
}

HTML:

 <div class="togglebutton">
    <label> <input type="checkbox" [checked]="temp(change)="temp">Light</label>
 </div>

• When temp value is true it checked, but when temp is false, it didn't uncheck automatically.

Solution 1

Use checked property of input field. Bind a boolean variable to checked property of input checkbox. Use observable concept, and subscribe the data variable which will trigger the check box visibility of input field. [checked]=‘yourModel.isChecked’ In subscribe method assign the current status to this isChecked property of yourModel. And based on the current value of this property the check box will be checked or unchecked.

observableVariable.subscribe( data => { process data or according to processed data, assign the status to

yourModel.isChecked = status

});

Solution 2

EDIT:

First create a SharedModule:

import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {RouterModule} from '@angular/router';


@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    RouterModule
  ],
  exports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    RouterModule
  ],
  declarations: []
})

export class SharedModule {}

Then import this SharedModule into the module of the route that needs to use the checkbox.

Now you will be able to use angular specific directives such as ngModel.

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

In component:

this.isChecked = Number(data['status']) === 0 ? false : true;

Solution 3

Try this:

<input type="checkbox" [checked]="temp == 1 ? '' : null">

This will show the checked attribute only when temp is 1.

Comments

[AT82]

could you create a working plunker that showcases this issue? :)

[ryan]

@AJT_82 Thank you. Now, it's solved. Just: <input type="checkbox" [checked]="temp">Light</label> In file ts, I just set: temp = !temp

[ryan]

The console show this error, sir. "Can't bind to 'ngModel' since it isn't a known property of 'input'"

[ryan]

Yes, why didn't you add modules in app.module.ts ?

[Chrillewoodz]

@ryan Because that doesn't work for lazy loaded modules. Which you should also be using. You have to import things into every module where you want to use them, or angular won't know what they are.

[ryan]

Thank you, but after I tried your solution, it still showed |"Can't bind to 'ngModel' since it isn't a known property of 'input'"

[Chrillewoodz]

@ryan Can you make a plunkr? I can't help you more if I can't see what you're doing wrong.

[ryan]

In my project, it doesn't need the routing sir