On top of my table that includes/shows a list of specific object, I put an add button, but actually it is not a button it is something like this, mixed of span, a and icon

```
    <div id="table" class="table-editable">
      <span class="table-add float-right mb-3 mr-2">
        <a class="text-success" (click)="add()">
          <mdb-icon fas icon="plus" size="2x"></mdb-icon>
        </a>
      </span>
.
.
.
    </div>

```

So, when the add icon is hit, the new empty row is created at the end of the table to add/enter the new object data, during this time, from creating new row to hit the save button, I would like the add button be disabled, but I could not disable this icon.

Note I have already had this button in my login form and it works properly,

```
 <button [disabled]="loading" class="btn btn-primary btn-block btn-signin">Sign In</button>

```

this login button will becoming disable during the credential check.
but I don't know how I can deal with this add icon

Thanks!