I am trying to use Material Design Lite in Angular 2 and have trouble updating checkboxes after the state has changed. See the following Plunker example.
When the user clicks on "All" to select all boxes, only the normal checkboxes update. I have tried using componentHandler.upgradeDom() and componentHandler.upgradeAllRegistered() but it made no difference.
How can I get the data-binding to work?
Ok, so I had a similar problem like you, and after good 2 or 3 hours of Googling around, I came up with a solution (or maybe it's just a dirty hack, don't know):
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" [class.is-checked]="isChecked()">
<input type="checkbox" [(ngModel)]="checkbox.Checked" class="mdl-checkbox__input">
<span class="mdl-checkbox__label">A label</span>
</label>
I've updated the plunk you've shared so you can see it there. I hope this solves your problem, as it have solved mine.
After reading the MDL code, it seemed to me that the appearance of the MDL checkbox only changes when it sees the onchange event. But just setting "checked" in code doesn't deliver the changed event. So, after I set it, I give it a poke.
function setChecked(element, bool) {
element.checked = bool;
var evt = document.createEvent("HTMLEvents");
evt.initEvent("change", false, true);
element.dispatchEvent(evt);
}
Now, I'm not saying this is the RIGHT or BEST way to do this, but it works for me.
