The following code cannot be parsed by VS Code.

Parser Error: Missing expected ) at column 34 in [(document.getElementById('btnA') as HTMLInputElement).disabled=true] in

<button id="btnA">A</button>
<button (click)="(document.getElementById('btnA') as HTMLInputElement).disabled=true">Disable A</button>

or

<button id="btnA">A</button>
<button (click)="<HTMLInputElement>document.getElementById('btnA').disabled=true">Disable A</button>

How to use document.getElementById() in inline click event binding?

Edit 1:

I want to use event binding rather than onclick.

Edit 2:

Actually I want to mimic the working code below but with getElementById().

<button #btnA>A</button>
<button (click)="btnA.disabled=true">Disable A</button>

CodePudding user response：

<button id="btnA">A</button>
<button onClick="() =>{<HTMLInputElement>document.getElementById('btnA').disabled=false"}>Disable A</button>

CodePudding user response：

You can use a template reference, which will be a reference to the HTML element

<button #btnA>A</button>
<button (click)="btnA.disabled=true">Disable A</button>