Disable disabled from an access-level button

Question

I have a list of items, where it is possible to edit and delete them through a button, and we have access levels in that system, having 'Sellers' and 'Master Users', but sellers can not delete anything, only Masters, therefore, on the delete button, I put a 'disabled' so it gets disabled, and I want to do a check for when it is User Master, take out this disabled, allowing deletion, tried a use a removeAttribute, but returns this error:

Typeerror: Cannot read Property 'removeAttribute' of null

HTML:

<div class="modal-header">
     <h5 class="modal-title" id="exampleModalLongTitle">
        Tem certeza que deseja excluir o Ramo ?
     </h5>
     <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
     </button>
</div>
<div class="modal-footer">
     <button type="button" class="btn btn-secondary" data-dismiss="modal">
        Não
     </button>
     <button type="button" class="btn btn-danger" data-dismiss="modal" (click)="del()" disabled id="delete">
        Sim
     </button>
</div>

TS:

  disableDelete() {
    let username = JSON.parse(localStorage.getItem('username'));
    console.log('Username: ', username);


    if(username === 'Arthur' || username == 'admin') {
      let btnRemove = document.getElementById('delete').removeAttribute('disabled');
    }
  }

Answer 1

You are using Angular so it doesn’t need any function to do either, in the TS just check which user type on ngOnInit() and store the value in a component class property and in the Html on the button to do the Property Binding with the property:

HTML

<div class="modal-header">
 <h5 class="modal-title" id="exampleModalLongTitle">
    Tem certeza que deseja excluir o Ramo ?
 </h5>
 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
    <span aria-hidden="true">&times;</span>
 </button>
</div>
<div class="modal-footer">
 <button type="button" class="btn btn-secondary" data-dismiss="modal">
    Não
 </button>
 <button type="button" class="btn btn-danger" data-dismiss="modal" (click)="del()" 
    [disabled]="verifica" id="delete">Sim
 </button>
</div>

TS

export class SeuComponent implements OnInit {
  verifica: boolean;
  tipoUser = 'Admin';   // pega o que vem do storage

  ngOnInit() {
    if(this.tipoUser == 'Qualquer coisa' || this.tipoUser == 'Admin') this.verifica = false;
    else this.verifica = true;
  }
}

To learn more about Property Binding in Angular see here.

To see a working example see here.

Answer 2

It is not necessary to assign the action to a variable. Test as below.

if(username === 'Arthur' || username == 'admin') {
  document.getElementById('delete').disabled = false;
}

To disable the button, simply switch to true.