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. 
 
    