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.

could you create a working plunker that showcases this issue? :) — AVJT82
– AVJT82, Commented May 21, 2017 at 8:43
@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
– ryan, Commented May 21, 2017 at 13:57

Abhishek Kumar · Accepted Answer · 2018-05-27 10:03:17Z

2

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

});

answered May 27, 2018 at 10:03

Abhishek Kumar

2,55912 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Chrillewoodz · Accepted Answer · 2017-05-20 14:46:32Z

1

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;

edited May 20, 2017 at 14:46

answered May 20, 2017 at 14:30

Chrillewoodz

28.5k23 gold badges102 silver badges189 bronze badges

6 Comments

ryan Over a year ago

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

ryan Over a year ago

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

Chrillewoodz Over a year ago

@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 Over a year ago

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 Over a year ago

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

|

Charmy Shah · Accepted Answer · 2018-08-20 08:20:02Z

1

Try this:

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

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

answered Aug 20, 2018 at 8:20

Charmy Shah

1012 silver badges8 bronze badges

Comments

yesterday_time · Accepted Answer · 2017-07-02 09:30:33Z

0

angular 2 the checkbox value is true, the checkbox is selected:

    <div class="togglebutton">
      <label> <input type="checkbox" [value]="true" [(ngModel)]="temp">Light</label>
    </div>

if temp is boolean, you must use [value]="true", when the temp is true, the checkbox is selected, if the temp is false, the checkbox is not selected, if you use value="true", the temp is string.

answered Jul 2, 2017 at 9:30

yesterday_time

235 bronze badges

Collectives™ on Stack Overflow

Checked and unchecked checkbox in Angular 2 by boolean value

4 Answers 4

yourModel.isChecked = status

Comments

6 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

yourModel.isChecked = status

Comments

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related