Typescript - to get button id

sathish

3y1.7kTypeScript

Hi,

I have a button like below

How to call the id - btn from component to typescript file to work for enable or disable

Thanks

6 Replies

Know the answer? Post it — somebody with the same question will find it here.

Tuhin Paul3y ago
Accepted 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.
+1
Jignesh Kumar3y ago
Hi satish,

Please refer this link which will help you,

https://stackblitz.com/edit/angular-7pdxqk?file=src%2Fapp%2Fapp.component.html
0
Tuhin Paul3y ago
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: `
    
  `,
})
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".
0

Naimish Makwana3y ago

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

Vishal Yelve3y ago
Please refer below link

https://bobbyhadz.com/blog/typescript-disable-button

https://tutorialscamp.com/angular-disable-button/
0
Tuhin Paul3y ago
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.
0