Angular2 update object array as per checkbox's selected values

Question

I have an array like following:

hobbies: any= [
    {'hobby': 'Sport', 'selected': false},
    {'hobby': 'Music', 'selected': false},
    {'hobby': 'Reading', 'selected': false},
    {'hobby': 'Travelling', 'selected': false},
    {'hobby': 'Movies', 'selected': false},
    {'hobby': 'Cooking', 'selected': false},
]

I iterate over this array in my template:

<span style="float: left; width: 100px;"><h5>Hobbies</h5></span>
<div class="mdl-grid">
    <div *ngFor="let chunk of hobbies | chunks: 2" class="mdl-cell mdl-cell--4-col">
        <label *ngFor="let hobby of chunk | values" #checkbox class="mdl-checkbox mdl-js-checkbox">
            <input type="checkbox" name="hobbies" [value]="hobby" 
            [(ngModel)]="hobby.selected" (change)="populateTest(hobby, $event.target.checked)" class="mdl-checkbox__input">
            <span class="mdl-checkbox__label">{{hobby.hobby}}</span>
        </label>
    </div>
</div>

What I want to do is: whichever values user checks those objects should accordingly be updated in hobbbies[] array (right now I simply push them into another array).

If any values are already marked as selected:true in hobbies[], then checkmarks should already be shown in my template.

How can I achieve this?

Vivek Doshi · Accepted Answer · 2017-04-03 13:50:18Z

1

Change your code to this:

<div *ngFor="let hobby of hobbies" class="mdl-cell mdl-cell--4-col">
    <label #checkbox class="mdl-checkbox mdl-js-checkbox">
        <input type="checkbox" name="hobbies" [value]="hobby.hobby" 
        [(ngModel)]="hobby.selected" class="mdl-checkbox__input"
         (change)='consoleHobbies()'>
        <span class="mdl-checkbox__label">{{hobby.hobby}}</span>
    </label>
</div>

Check value on change :

Component side :

consoleHobbies()
{
   console.log(this.hobbies);
}

Some of the Angular2 version updates doesn't support above code , try to run this

<div *ngFor="let hobby of hobbies; let j = index;" class="mdl-cell mdl-cell--4-col">
<label #checkbox class="mdl-checkbox mdl-js-checkbox">
    <input type="checkbox" name="hobbies" [checked]='hobbies[j].selected' (change)='hobbies[j].selected = $event.target.checked' />
    <span class="mdl-checkbox__label">{{hobby.hobby}}</span>
</label>

edited Apr 3, 2017 at 13:50

answered Apr 3, 2017 at 13:25

Vivek Doshi

58.8k12 gold badges120 silver badges126 bronze badges

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

16 Comments

Thinker Over a year ago

Okay, and how can I check the latest state of hobbies[]? at each click perhaps for cross checking purpose?

Vivek Doshi Over a year ago

onchange set function which can console the hobbies , so you can check it on each check/uncheck

Thinker Over a year ago

great! this works perfect. The only thing is: If I modify my original hobbies[] array with some values for selected as true, it do not reflect in template? I thought those fields would be marked checked by default.

Vivek Doshi Over a year ago

No it will reflect those in template side.

n00dl3 Over a year ago

why do you use (change) and not (ngModelChange), no need to bind value to hobby, neither...

|

Collectives™ on Stack Overflow

Angular2 update object array as per checkbox's selected values

1 Answer 1

16 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

16 Comments

Your Answer

Sign up or log in

Post as a guest

Related