Angular 5 showing checkboxes as checked based on array

Question

I have a set of dynamic checkboxes in an Angular form:

<div class="form-check" *ngFor="let topic of topics">
    <input class="form-check-input" (change)="onChange(f)" #f type="checkbox" [value]="topic.name" name="topicgroup">
    <label class="form-check-label" style="font-weight: normal">
        {{topic.name}}
    </label>
</div>

In my edit component, how do I set them as checked?

I have an array that holds all the options, and one which of the options are checked:

Topics: string[] = ['Topic1', 'Topic2', 'Topic3', 'Topic4', 'Topic5']; 
selectedTopics: string[] = ['Topic1', 'Topic2'];

How do I reflect that on my html page?

Update: This is my onChange function:

onChange(f) {
if (this.selectedTopics.indexOf(f.value) == -1) {
  this.selectedTopics.push(f.value);
} else {
  this.selectedTopics.splice(this.selectedTopics.indexOf(f.value), 1);
}

Arpit Sancheti · Accepted Answer · 2018-02-19 05:09:24Z

8

First, You are using topic.name as per your array it will be only topic.

Second, Add [checked] property to mark them as checked or unchecked as shown below.

<div class="form-check" *ngFor="let topic of topics">
    <input class="form-check-input" [checked]="topic in selectedTopics" (change)="onChange(topic)" #f type="checkbox" [value]="topic" name="topicgroup">
    <label class="form-check-label" style="font-weight: normal">
        {{topic}}
    </label>
</div>

Third your function onChange(topic) will go as below

onChange(topic: string) {
  let index = this.selectedTopics.indexOf(topic);
  if (index == -1) {
    this.selectedTopics.push(value);
  } else {
    this.selectedTopics.splice(index, 1);
  }
}

UPDATE replace [checked]="topic in selectedTopics" with [checked] = isSelected(topic)

and in your controller add function

isSelected(topic){
    return selectedTopics.indexOf(topic) >= 0;
}

edited Feb 19, 2018 at 5:09

answered Feb 18, 2018 at 7:01

Arpit Sancheti

2482 silver badges12 bronze badges

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

4 Comments

Arpit Sancheti Over a year ago

if [checked]="topic in selectedTopics" doesnot work you can do [checked]="selectedTopics.indexof(topic) >= 0"

Robbie Mills Over a year ago

Unfortunately neither of these approaches worked. Either 'unexpected token 'in' ' or "unexpected method 'indexof'

Arpit Sancheti Over a year ago

@RobbieMills I have updated the answer please check it.

Robbie Mills Over a year ago

This is the approach I ended up using

Martin Parenteau · Accepted Answer · 2018-02-18 13:41:59Z

3

As shown in this stackblitz, you can use [ngModel] and (ngModelChange) to bind your data to the input elements:

<div class="form-check" *ngFor="let topic of topics; let i=index">
  <input [ngModel]="isSelected(topic)" (ngModelChange)="onChange(topic, $event)" name="topicgroup_{{i}}" type="checkbox" class="form-check-input">
  <label class="form-check-label" style="font-weight: normal">
    {{topic}}
  </label>
</div>

with the methods isSelected and onChange defined in the component class:

topics: string[] = ['Topic1', 'Topic2', 'Topic3', 'Topic4', 'Topic5'];
selectedTopics: string[] = ['Topic1', 'Topic4'];

isSelected(value: string): boolean {
  return this.selectedTopics.indexOf(value) >= 0;
}

onChange(value: string, checked: boolean) {
  if (checked) {
    this.selectedTopics.push(value);
  } else {
    let index = this.selectedTopics.indexOf(value);
    this.selectedTopics.splice(index, 1);
  }
}

You mention in your question that these controls are to be included in a form. Each input element must therefore have a distinct name, which is achieved with the help of the index variable: name="topicgroup_{{i}}".

edited Feb 18, 2018 at 13:41

answered Feb 18, 2018 at 5:07

Martin Parenteau

74k13 gold badges137 silver badges158 bronze badges

1 Comment

Martin Parenteau Over a year ago

@RobbieMills - Was there a problem with my answer? I see that you unmarked it after some part of my code was duplicated in another answer.

Sajeetharan · Accepted Answer · 2018-02-18 03:42:23Z

0

You need to change your datastructure as array of objects with value and checked property

selectedTopics: any[] = [ {'value':'Topic1','checked':false}, {'value':'Topic2','checked':true}];

whenever checkbox is checked/unchecked you can update the checked property to get the value.

answered Feb 18, 2018 at 3:42

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

1 Comment

Robbie Mills Over a year ago

But selectedTopics is anything that is checked... ? So I'm not sure how modifying the data will help. I've updated the question with additional details

Chellappan வ · Accepted Answer · 2018-02-18 05:01:09Z

0

Angular varible are case sensitive check this working example:https://stackblitz.com/edit/angular-uwekdb?file=app%2Fapp.component.ts

answered Feb 18, 2018 at 5:01

Chellappan வ

27.9k4 gold badges39 silver badges69 bronze badges

1 Comment

Robbie Mills Over a year ago

That's great, but I'm not sure how it's relevant to my problem

Collectives™ on Stack Overflow

Angular 5 showing checkboxes as checked based on array

4 Answers 4

4 Comments

1 Comment

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related