angular 2 multiple checkbox preselect

Question

I have a multiple checkbox list in my page.

<label class="each-topic each-hcp" for="hcp{{hcpinfo.id}}{{hcpinfo.firstName}}" *ngFor="let hcpinfo of hcplist; let i=index">
    <input type="checkbox" name="hcpid" id="hcp{{hcpinfo.id}}{{hcpinfo.firstName}}" value="{{hcpinfo.id}}">
    <h4>{{hcpinfo.firstName}}</h4>
</label>

In my .ts file I have a predefined array as this.hcparr.

This contains values like [5,8,10] - as array.

If hcparr has hcpinfo.id value then the corresponding checkbox needs to be selected.

How do you implement the if condition with multiple check box with this array list?

Please help me.

try adding up a plunker to your question.

super cool
– super cool

2018-08-10 06:18:00 +00:00
Commented Aug 10, 2018 at 6:18 — super cool
– super cool, Commented Aug 10, 2018 at 6:18

Sujata Chanda · Accepted Answer · 2018-08-10 06:32:35Z

1

Use checked binding:

 <label class="each-topic each-hcp"  *ngFor="let hcpinfo of hcplist; let i=index" >                
  <input type="checkbox" name="hcpid" id="hcp{{hcpinfo.id}}{{hcpinfo.firstName}}" value="{{hcpinfo.id}}" [checked]="hcparr.indexOf(hcpinfo.id) > -1" >
  <span>{{hcpinfo.firstName}}</span>          
 </label>

Demo

answered Aug 10, 2018 at 6:32

Sujata Chanda

3,3952 gold badges23 silver badges36 bronze badges

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

Collectives™ on Stack Overflow

angular 2 multiple checkbox preselect

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related