Replacing document.getElementById('checkBox') in Angular

Question

I am trying to replace the document.getElementById from:

target = document.getElementById('checkBox') as HTMLInputElement;

I have tried:

1. adding #target in html
2. import ElementRef and ViewChild
3. add @ViewChild('target') public target: ElementRef;
4. this.target.nativeElement.checked = false;

and this does not seem to be working.

Answer 1

you don't have to use template reference (#target) or ViewChild to change the value of the checkbox input.

you have two options:

1- Two-way Data Binding

create a property inside your component and bind it to the input(checkbox) using [(ngModel)]="property_name" now you can change the value of this property and the checkbox will be changed

2- Reactive form

if you are using this input inside a reactive form, just add a FormControl to the FormGroup you are using and use this FormControl to change the value

this.form_group_name.get('form_control_name').setValue(true / false);

this.form_group_name.get('form_control_name').patchValue(true / false);