how to convert JavaScript code document.querySelector into Angular9?

Question

I have code which is written in JavaScript code as let input= document.querySelector("#input"); and

input.addEventListener('click', function() {
    canvas.getContext('2d').drawImage(input, 0, 0, canvas.width, canvas.height);
    let image_data_url = canvas.toDataURL('image/jpeg');
});

I want to write this code in angular how can I convert and use this code in angular9 project anyone please help me

Answer 1

the best way to do it is like this:

<input (click)="clickOnMyInput($event)">

and in your.ts file

clickOnMyInput(e){
    this.canvas.getContext('2d').drawImage(e.target, 0, 0, this.canvas.width, this.canvas.height);
    let image_data_url = this.canvas.toDataURL('image/jpeg');
}