I'm trying to check/uncheck checkboxes based on a list of values I obtain from backend. I'm trying to do it immediately once I have finished painting the page.
My application code for fetching data is encapsulated in ngOnInit
, and I'm trying to modify in ngAfterContentChecked
. But, it is failing and when I do a document.getElementById()
from my component, it is returning a null
.
P.S: I can't be using model
because I'm dealing with key-value pairs. Hence, I'm manually fetching values. More on this here - Angular 2 - Displaying checkboxes using key-value pairs
Edit 1:
Component:
@Component({
selector: 'xxx',
templateUrl: './myHtml.html',
})
export class MyComponent implements OnInit, AfterContentChecked {
myList: Param[];
ngOnInit() {
this.myList = //logic for fetching data
console.log(this.myList); // This is getting printed
}
ngAfterContentChecked() {
console.log(this.myList); // This is also getting printed
for ( var i = 0; i < this.myList; i++ ) {
document.getElementById(this.myList[i].paramName.concat(this.myList[i].paramValue).checked = true;
}
}
}
Html:
<div *ngFor="let var of myList">
<input type="checkbox" id="{{param.paramName}}{{param.paramValue}}" value="{{var.paramValue}}"><label>{{var.paramValue}}</label>
</div>
document.getElementById
in the component returns null
Edit 2:
Just realized that this.myList
is not getting logged - I was setting the value from elsewhere and thought it was getting intialized.