Checkbox not working. Angular 2

Question

In Oracle database there is such parameter "active" with data type "VARCHAR2 (1 byte)". The values of Y and N are used there. I want to make the checkbox active if Y is on and not active N.

I wanted to do so but checkbox everywhere is active:

<table class="table table-hover">
  <thead>
    <tr>
      <th [class.active]="key === 'name'" (click)="setOrder('name')"><b>Name <span [hidden]="reverse">▼</span><span [hidden]="!reverse">▲</span></b></th>
      <th style="text-align: center;" [class.active]="key === 'active'" (click)="setOrder('active')"><b>File <span [hidden]="reverse">▼</span><span [hidden]="!reverse">▲</span> </b></th>
     </tr>
  </thead>
  <tbody>
    <tr *ngFor="let project of projects | orderBy: key:reverse | let projectIndex = index" >
      <td >{{project.name}}</td>
      <td style="text-align: center">
        <input type="checkbox" [checked]="project.active == 'Y'" class="material_checkbox" [(ngModel)]="project.active" name="active_{{projectIndex}}"  disabled />
      </td>
    </tr>
  </tbody>
</table>

How can I set a condition so that if there was a Y then the checkbox is active and if N then inactive?

In your case you need use boolean value instead of Y and N. Because when i uncheck one checkbox it returns false value here is example: (stackblitz.com/edit/angular-mx9v6p) you can see here. — Sanoj_V
– Sanoj_V, Commented Jun 29, 2018 at 5:28
Here is another example : (stackoverflow.com/a/44135418/9775003) even i am using boolean value for multiple checkbox in ngFor. — Sanoj_V
– Sanoj_V, Commented Jun 29, 2018 at 5:32

Shadab Faiz · Accepted Answer · 2018-06-29 06:06:47Z

0

I assume this is your basic project type:

interface Project {
  name: string,
  active: string;

  // additional properties.
}

If yes, then:

 projectList: Project[];

  constructor() {
    this.populateProjectList();
  }

  populateProjectList(): void {
    this.projectList = [];
    this.projectList.push({name: 'project1', active: 'Y'});
    this.projectList.push({name: 'project2', active: 'N'});
    this.projectList.push({name: 'project3', active: 'Y'});
    this.projectList.push({name: 'project4', active: 'N'});
  }

// In your HTML

<p *ngFor="let project of projectList">
  <label for="">{{project.name}}</label>
  <input type="checkbox" [checked]="project.active == 'Y'"> 
</p>

You can play here for more options.

answered Jun 29, 2018 at 6:06

Shadab Faiz

2,5182 gold badges22 silver badges32 bronze badges

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

Comments

deepansh2323 · Accepted Answer · 2018-06-29 05:34:53Z

0

I checked, As your [ngModel] is not boolean, you should remove it. Just use like below solution:-

<input type="checkbox" [checked]="project.active == 'Y'" class="material_checkbox"  name="active_{{projectIndex}}"  disabled />

edited Jun 29, 2018 at 5:34

answered Jun 29, 2018 at 4:23

deepansh2323

2611 silver badge8 bronze badges

11 Comments

user10008742 Over a year ago

It did not work, all the same, all checkboxes are active

deepansh2323 Over a year ago

All checkbox means? Do you have other checkboxes also?

deepansh2323 Over a year ago

there "name" property should not be the same

user10008742 Over a year ago

You mean the checkboxes of another table?

deepansh2323 Over a year ago

I mean if two check boxes have same "name" property then they will behave the same. "name" property of all checkboxes should be different from each other.

|

Collectives™ on Stack Overflow

Checkbox not working. Angular 2

2 Answers 2

Comments

11 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

11 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related