Question 222586 in Html Question posted in
Some basic documentation can be found here.

How to enable html file button in type script – Angular

I am new to Angular.

I have a following button control in html file and i am trying to enable it in the ts (type script) file on map click event.

       <div *ngIf="editVisible" class="p-col-1">
      <button label="Update" icon="far fa-save" class="p-button-raised p-button-primary" pButton
        [disabled]="!has(Permission.Admin_Pod_Location_Full_Control) || cleanData"
        (click)="updateLocation()"></button>
      </div>

I have tried this in the Type Script file button it doesn’t enable the button.

   MapClick(event) {
        const button = document.getElementsByClassName('p-button-raised p-button-primary');
        button.setAttribute('disabled', '');
   }
Tags:

2

Answers


  1. 0

    getElementsByClassName method returns an array-like collection of elements, not a single element.

    you need to access the specific button you want to disable using an index.

    Try this:

    MapClick(event) {
    const buttons = document.getElementsByClassName('p-button-raised p-button-primary');
    
    // Assuming you want to disable the first button in the collection
    if (buttons.length > 0) {
        buttons[0].setAttribute('disabled', '');
    }
}

    (Assuming that you want to disable the first button in the collection.)

    Login or Signup to reply.
  2. 0

    To enable the button in your TypeScript file, you should use Angular’s data binding and property binding approach rather than directly manipulating the DOM using document.getElementsByClassName. Here’s how you can achieve this:

    1. In your component’s TypeScript file (e.g., component.ts), create a boolean property to track the state of the button:
    // Import the necessary dependencies and define your component

export class YourComponent {
  editVisible = true; // Assuming you initially want the button to be enabled
  // Add other properties and methods as needed

  MapClick(event) {
    // Your logic here to handle the map click event and decide whether to enable or disable the button
    this.editVisible = true; // Set this to true or false based on your conditions
  }

  updateLocation() {
    // Implement your update logic here
  }

  // Add other methods and logic as needed
}
    1. In your component’s HTML file (e.g., component.html), bind the disabled property of the button to the editVisible property defined in the TypeScript file:
    <div *ngIf="editVisible" class="p-col-1">
  <button label="Update" icon="far fa-save" class="p-button-raised p-button-primary" pButton
    [disabled]="!has(Permission.Admin_Pod_Location_Full_Control) || cleanData"
    (click)="updateLocation()"></button>
</div>

    With this approach, when the editVisible property is set to true, the button will be enabled, and when it’s set to false, the button will be disabled automatically based on the data binding. You can then modify the MapClick method to toggle the value of editVisible based on your specific conditions and requirements. Avoid direct DOM manipulation whenever possible in Angular, as it is against the framework’s principles and can lead to unexpected behavior.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search