How to make a checkbox check dynamically based on a array of values in angular 6?

Question

My ajax call result is like the following,

data : 
  0: {Address: "Delhi", EmailID: "[email protected]", MobileNo: 
"9876543210", Name: "Bravo", Date: "04/06/2008", …}
1: {Mode: "0"}
2: {Mode: "1"}
3: {Mode: "2"}
4: {Mode: "3"}
5: {Mode: "4"}

I can display the datas using,

 <p *ngIf="details">{{ details[0]?.EmailID }}</p>

But the modes which Im getting are the values of checkboxes. How can I make a checkbox selected based on the values which is returing from ajax call.

My checkbox code html is given following:

   <div class="custom-checkbox">
     <input type="checkbox" class="custom-control-input 
       [attr.id]="mode[i].id" [name]="mode[i].name"
       [checked]="(mode && (mode.indexOf(mode[i].id) !== -1))">
     <label class="custom-control-label" [attr.for]="mode[i].id"> 
       {{mode[i].name}}</label>
   </div>
   <div class="custom-control custom-checkbox custom-control-inline">
     <input type="checkbox" class="custom-control-input" 
       [attr.id]="mode[i+1].id" [name]="mode[i+1].name"
       [checked]="(mode && (mode.indexOf(mode[i+1].id) !== -1))">
     <label class="custom-control-label" [attr.for]="mode[i+1].id"> 
       {{mode[i+1].name}}</label>
   </div>

My ts file:

public mode = [
  { id: 0, name: 'Select All' },
  { id: 1, name: 'aaa' },
  { id: 2, name: 'bbb' },
  { id: 3, name: 'cccc' },
  { id: 4, name: 'dddd' },
];

Can somebody help me with this please?

Syed Ali Taqi · Accepted Answer · 2018-10-09 12:06:09Z

3

You would need something like this:

<input type="checkbox" value="item.id" [attr.checked]="fooData.mode === item.id ? true : null" />

notice null here.

I have created a small Working Demo like your code.

Updated Demo with array of data.

edited Oct 9, 2018 at 12:06

answered Oct 9, 2018 at 8:15

Syed Ali Taqi

4,9943 gold badges36 silver badges44 bronze badges

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

7 Comments

sasi Over a year ago

Thank you so much for your reply @SyedAliTaqi For single value, Im able to do. But if I have more values which are returning how can i check that checkbox? Will you please help me on that?

Syed Ali Taqi Over a year ago

more values coming from service?

sasi Over a year ago

Yes Yes @SyedAliTaqi like it is returning three values aaa, bbb, ccc. How can i make them all selected?

sasi Over a year ago

Yes, but I need to check three values in a single row. In example we are having three rows knw?

sasi Over a year ago

Thank you so much. This is what I was looking fr. Thanks again

|

Collectives™ on Stack Overflow

How to make a checkbox check dynamically based on a array of values in angular 6?

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related