How to address and set a checkbox without ViewChild

Question

Hello syncfusion team,

I am trying to set the checked state of a syncfusion checkbox, but without a ViewChild because in my scenario, I don't have a ViewChild available, where I want to achieve the state change. I tried to use basic HTML and document.getElementById(), so:
1) (document.getElementById('ejsCheckbox') as HTMLInputElement).checked = true;

or
2) (document.getElementById('ejsCheckbox') as any).checked = true;

but neither worked. Here is a stackblitz to clarify this problem: https://stackblitz.com/edit/angular-4y69mm?file=src%2Fapp%2Fapp.component.ts

Thanks in regard,
Jonas Czeslik

Gayathri KarunaiAnandam · Answer

Hi Jonas,  

We have checked your reported query. We can get the instance of the component by using the getComponent method. Please check the below code snippet.  

Code: 





import { getComponent } from '@syncfusion/ej2-base';  
  turnOnWithHTML() { 
    let checkboxed: CheckBox = getComponent( 
      document.getElementsByClassName('e-checkbox')[0], 
      'checkbox' 
    ) as CheckBox; 
 
    checkboxed.checked = true; 
    console.log(checkboxed.checked); 
  } 
  
For your convenience, we have prepared a sample based on this. Please check the below sample link.  

Sample: https://stackblitz.com/edit/angular-nnb9zg?file=src%2Fapp%2Fapp.component.ts 

Please get back to us, if you need further assistance.  

Regards,  
Gayathri K

Jonas Czeslik · Answer

I modified it a little bit because I wanted to get a checkbox based on its id and not based on the general class name and its index, which would not work in a dynamic scenario.
Problem is that I could not only say

let checkboxed: CheckBox = getComponent(

document.getElementById('ejsCheckbox'),

'checkbox'

) as
CheckBox;

because I had to find out that the id that you define in <ejs-checkbox ...> is only the id for the checkbox-wrapper, which does not help you at all to set any values for the checkbox. The checkbox input itself is inside of it.

=> So the best way for me to set a checkbox state based on a checkbox id is a mixture of both (get the wrapper with its id and in its subtree get the first element with e-checkbox class.

      let checkbox: CheckBox = getComponent(document.getElementById('myCheckboxID')
        .getElementsByClassName('e-checkbox')[0] as HTMLElement,'checkbox') as CheckBox;      
      checkbox.disabled = false;

Thanks for the help and greetings!
Jonas C.

Gayathri KarunaiAnandam · Answer

Hi Jonas, 

Thanks for the update. 

We are happy to hear that your requirement has been fulfilled. We suggest that we can also get the instance of the component by using below code snippet. 





turnOnWithHTML() { 
    let CheckboxELem: any = document 
      .getElementById('ejsCheckbox') 
      .querySelector('input'); 
    let checkboxed: CheckBox = CheckboxELem.ej2_instances[0]; 
 
    checkboxed.checked = true; 
    console.log(checkboxed.checked); 
  } 
 

Sample: https://stackblitz.com/edit/angular-jkf1qj?file=src%2Fapp%2Fapp.component.ts 

Please feel free to contact us if you need any further assistance on this. 

Regards, 
Gayathri K