Angular how to check a checkbox with [checked] attribute and key value pair?

Question

How do you use [checked] attribute in Angular, alongside key value pair values, that are gotten from backend server? I am receiving data from a response like this:

[{"endpoint":"/profile"},{"endpoint":"/settings"},{"endpoint":"/payments"},{"endpoint":"/login"},{"endpoint":"/accounts"},{"endpoint":"/v2/accounts/*"}]

My checkboxes are dynamically generated. All of the available endpoints are listed from a enabledEndpoints list in the component.ts class, then I want them to be checked, if they are returned in the http response and placed into profileEndpoints object. The object has one variable which is endpoint: string. This is the markup code for it:

<label for="enabledEndpoints">Enabled Endpoints</label>
<tr *ngFor="let endpoint of enabledEndpoints;">
  <td class="pr-4 pl-3">
    <div class="custom-control custom-checkbox">
      <input type="checkbox" class="custom-control-input"
             id="{{endpoint}}"
             [value]="endpoint"
             [checked]="profileEndpoints.includes(endpoint)"
             name="enabledEndpoints">
      <label class="custom-control-label" [for]="endpoint">
        {{ endpoint }}
      </label>
    </div>
  </td>
</tr>

How do I make them checked using the [checked] attribute? I have tried include functions.

Naren Murali · Accepted Answer · 2022-08-08 08:30:48Z

1

Since profileEndpoints is an object with one property endpoint please change the code as below.

in controller add this.

isChecked(endpoint: string): boolean {
    return !!(this.profileEndpoints.find(x => x.endpoint === endpoint))
}

html it will be

<label for="enabledEndpoints">Enabled Endpoints</label>
<tr *ngFor="let endpoint of enabledEndpoints;">
  <td class="pr-4 pl-3">
    <div class="custom-control custom-checkbox">
      <input type="checkbox" class="custom-control-input"
             id="{{endpoint}}"
             [value]="endpoint"
             [checked]="isChecked(endpoint)"
             name="enabledEndpoints">
      <label class="custom-control-label" [for]="endpoint">
        {{ endpoint }}
      </label>
    </div>
  </td>
</tr>

edited Aug 8, 2022 at 8:30

answered Aug 8, 2022 at 7:50

Naren Murali

66.3k6 gold badges51 silver badges97 bronze badges

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

3 Comments

dovexz12323 Over a year ago

Does not seem to be working, throws a Parser Error.

Naren Murali Over a year ago

@dovexz12323 what is the full error, can I get a stackblitz

dovexz12323 Over a year ago

Parser Error: Bindings cannot contain assignments at column 26 in [profileEndpoints.find(x => x.endpoint === endpoint)]

Collectives™ on Stack Overflow

Angular how to check a checkbox with [checked] attribute and key value pair?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related