0

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.

Community
  • 1
  • 1
Ramana Sarva
  • 293
  • 2
  • 5
  • 20

0 Answers0