Angular Project, Disable Add Icon, During Saving A New Object/Data

Question

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!

Answer 1

You can use *ngIf. I'm not sure whether it will work on the <mdb-icon> tag or the even the <a> anchor tag so maybe something like this:

      <span *ngIf="someCondition" 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>

      <span *ngIf="!someCondition" class="table-add float-right mb-3 mr-2">
        <!-- whatever HTML you want to render instead, or nothing -->
      </span>