changing the checked property of checkbox in angular2

Question

I have a list displaying all the columns in the grid in the following template manner

<ul id="gridColumnList" class="gridColumnList">
    <li *ngFor="let col of grid.colModel">
        <span><input type="checkbox" class="checkbox col-visibility" **[checked]="!col.hidden"** /></span>
        <span><input type="checkbox" class="checkbox col-freeze" [checked]="col.locked" **[disabled]="col.hidden"** /></span>
        <span class="col-title">{{col.label}}</span>
    </li>
</ul>

I want to change the state of the checkbox input based on the col.hidden value which is a boolean type but the property binding does not work instead if interpolation is used like checkbox = {{col.hidden}} it works. what is wrong with the property binding?

Yong · Accepted Answer · 2016-12-16 11:03:46Z

1

remove all "**"

<span><input type="checkbox" class="checkbox col-visibility" [checked]="!col.hidden"/></span>

add a testing plunker

edited Dec 16, 2016 at 11:03

answered Dec 16, 2016 at 8:05

Yong

1,1271 gold badge12 silver badges21 bronze badges

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

2 Comments

kayess Over a year ago

While this code snippet may solve the question, including an explanation really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. Please also try not to crowd your code with explanatory comments, this reduces the readability of both the code and the explanations!

rohit.b Over a year ago

** is not there. its written in the same manner as you wrote. ** was to distinguish as bold

Collectives™ on Stack Overflow

changing the checked property of checkbox in angular2

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related