Typescript - to get button id

Question

Hi I have a button like below To Test How to call the id - btn from component to typescript file to work for enable or disable Thanks

Tuhin Paul · Answer

For the code below: function test() { const btn = document.getElementById(btn) as HTMLButtonElement; // Disable the button btn.disabled = true; // Enable the button btn.disabled = false; } there are a few style and best practice improvements that could be made: 1) It's generally a good practice to use a more descriptive name for the function such as toggleButtonState or enableDisableButton. 2) Since we know the type of the element we are accessing we can use the more specific HTMLButtonElement type instead of casting to an HTMLButtonElement using the as keyword. 3) It's a good practice to cache the result of getElementById to avoid searching the DOM tree multiple times for the same element. 4) If we're just toggling the button state we can use the toggle method instead of setting the disabled property directly. function toggleButtonState() { const btn = document.querySelector(#btn) as HTMLButtonElement; // Disable the button if it's currently enabled or vice versa btn.toggleAttribute(disabled); } we use the querySelector method to select the button element by its ID and use the toggleAttribute method to toggle the disabled attribute of the button.

Naimish Makwana · Answer

Hello Sathish Try below code: function test() { const btn = document.getElementById(btn) as HTMLButtonElement; // Disable the button btn.disabled = true; // Enable the button btn.disabled = false; } Thanks Naimish Makwana

Tuhin Paul · Answer

In your component class import the ViewChild decorator from @angular/core and use it to get a reference to the button element: import { Component ViewChild } from '@angular/core'; @Component({ selector: 'app-my-component' template: ` To Test ` }) export class MyComponent { @ViewChild('btn') btnElement: any; test() { // enable or disable the button this.btnElement.disabled = !this.btnElement.disabled; } } we use @ViewChild to get a reference to the button element using its template reference variable #btn. We then store the reference to the button element in a class property called btnElement.

Vishal Yelve · Answer

Please refer below link https://bobbyhadz.com/blog/typescript-disable-button https://tutorialscamp.com/angular-disable-button/

Tuhin Paul · Answer

To access the btn button from the component's TypeScript file you can use Angular's ViewChild decorator to get a reference to the button element.

Jignesh Kumar · Answer

Hi satish Please refer this link which will help you https://stackblitz.com/edit/angular-7pdxqk?file=src%2Fapp%2Fapp.component.html