CODEWITHSUNDEEP
angularcheckbox
pranami
pranami

Reputation: 1415

How do I get the checked and unchecked values of a checkbox in angular

I have a list of checkboxes as shown below:

 <div class="col-md-4 md-padding"  *ngFor="let node of nodeList; let j=index;">
              <md-checkbox>
                <md-checkbox
                  class="md-h6 row md-padding--xs"
                  name="{{node.abc}}"
                  label="{{node.abc}}"
                  value="{{node.abc}}"
                  required="true"
                  htmlId="filter_label_{{j}}"
                  (click)="updatefilter(node.abc)"
                  [formControlName]="servers"
                  [(ngModel)]="node.selected">
                </md-checkbox>


              </md-checkbox-group>


            </div>

I have to check if the checbox is checked or unchecked. How do I proceed?

Upvotes: 0

Views: 688

Answers (1)

Apoorva Chikara
Apoorva Chikara

Reputation: 8773

It seems the node itself doesn't have the selected property, first create one on node interface or node object.

Secondly add the change event on the checkbox whenever user clicks on the checkbox change will be called and you can toggle the value for node.selected.

In Html file:

 <md-checkbox
                  class="md-h6 row md-padding--xs"
                  name="{{node.FQDN}}"
                  label="{{node.FQDN}}"
                  value="{{node.FQDN}}"
                  required="true"
                  htmlId="filter_label_{{j}}"
                  (click)="updatefilter(node.FQDN); updateSelection(node)"
                  [(ngModel)]="node.selected">
                </md-checkbox>

In TS file:

public updateSelection(node) {
     // update the values to make them persistent
     node.selected = node.selected ? false : true;
}

Upvotes: 1

Related Questions