Angular check if value is in an array in angular template

Question

i wanted to check if a value exists in an array and return true if it does and false if it dosent in an angular checkbox input field.

here is the code

 <div style="margin-left: 20px;" *ngFor="let li of permissions;">
            <nz-form-item *ngIf="li.entity === 'Staffs'">
              <nz-form-control style="margin-bottom: -25px;">
                <input type="checkbox" value="{{li.id}}" [checked]="li.id == select" name="staff">{{select}} - {{li.id}}
              </nz-form-control> 
            </nz-form-item>
            
          </div>

select is an array containg id of the selected checkbox values any help is appreciated.

Barremian · Accepted Answer · 2021-03-31 15:10:36Z

2

You probably need to use Array#includes method to perform the check. But it's not a good idea to bind a function to a property like [checked]=select.includes(li.id). In case of default change detection strategy it will get executed for each CD cycle might have a performance impact.

Instead you could run the check in the controller and introduce a new boolean property in the object.e

Controller

ngOnInit() {
  // initialize `permissions` and `select` arrays

  this.permissions = this.permissions.map(permission => ({
    ...permission,
    isChecked: this.select.includes(permission.id)
  });
}

Template

<div style="margin-left: 20px;" *ngFor="let li of permissions;">
  <nz-form-item *ngIf="li.entity === 'Staffs'">
    <nz-form-control style="margin-bottom: -25px;">
      <input type="checkbox" value="{{li.id}}" [checked]="li.isChecked" name="staff">{{select}} - {{li.id}}
    </nz-form-control> 
  </nz-form-item>          
</div>

answered Mar 31, 2021 at 15:10

Barremian

31.2k4 gold badges37 silver badges67 bronze badges

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

3 Comments

Abnet Hussien Over a year ago

i tried it but it is not working i am a beginner on angular so bear with me :)

Barremian Over a year ago

The code in the controller is only an example. For actual implementation, you'd have to show how the variables permissions and select are initialized.

Abnet Hussien Over a year ago

It is working now but how can i attach the selected values and the other empty check box values if they got selected to the NgModel?

Deepak · Accepted Answer · 2021-03-31 15:31:08Z

1

Does your select array contain only ids? If so, you can follow @michael's approach or just an add-on approach:

<input type="checkbox" value="{{li.id}}" [checked]="select.indexOf(li.id) > -1" name="staff">

Your checkbox will be checked if select array contains id.

answered Mar 31, 2021 at 15:31

Deepak

2,7522 gold badges13 silver badges31 bronze badges

1 Comment

Abnet Hussien Over a year ago

It is working now but how can i attach the selected values and the other empty check box values if they got selected to the NgModel?

Collectives™ on Stack Overflow

Angular check if value is in an array in angular template

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related