Disable and Enable HTML elements on Button Click in Angular

Hi ramitaherwahd...,

Refer below sample code.

home.component.html

<table>
  <tr>
    <td><input type="file" name="create" class="showhide" disabled="disabled" /></td>
    <td><input type="button" name="name" value="Create" style="width:70px" (click)="ShowHide('create')" /></td>
  </tr>
  <tr>
    <td><input type="file" name="read" class="showhide" disabled="disabled" /></td>
    <td><input type="button" name="name" value="Read" style="width:70px" (click)="ShowHide('read')" /></td>
  </tr>
  <tr>
    <td><input type="file" name="update" class="showhide" disabled="disabled" /></td>
    <td><input type="button" name="name" value="Update" style="width:70px" (click)="ShowHide('update')" /></td>
  </tr>
  <tr>
    <td><input type="file" name="delete" class="showhide" disabled="disabled" /></td>
    <td><input type="button" name="name" value="Delete" style="width:70px" (click)="ShowHide('delete')" /></td>
  </tr>
  <tr>
    <td><input type="file" name="view" class="showhide" disabled="disabled" /></td>
    <td><input type="button" name="name" value="View" style="width:70px" (click)="ShowHide('view')" /></td>
  </tr>
</table>

home.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
})
export class HomeComponent {
  ShowHide(name: any) {
    var files = document.getElementsByClassName('showhide');
    for (var i = 0; i < files.length; i++) {
      if (files[i].getAttribute('name') != name) {
        files[i].setAttribute('disabled', 'disabled');
      } else {
        files[i].removeAttribute('disabled');
      }
    }
  };
}

Screenshot