CODEWITHSUNDEEP
htmlangulartypescriptdisable
MoeinMP
MoeinMP

Reputation: 137

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

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!

Upvotes: 0

Views: 548

Answers (3)

MoeinMP
MoeinMP

Reputation: 137

Thanks @Ben Hulan! Final code is something like this, 

<div *ngIf="addButton">
    <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>
  <div *ngIf="!addButton">
    <span class="table-add float-right mb-3 mr-2">
      <a>
        <mdb-icon fas icon="plus" size="2x"></mdb-icon>
      </a>
    </span>
  </div>

Upvotes: 0

CChavez
CChavez

Reputation: 1

The process should be the same as the login button, unfortunately to give you a proper answer I need your typescript code.

In the meantime make sure that the loading property you are using to disable the button is set to true on your add() method and set to false on your save method.

Upvotes: 0

Ben Hulan
Ben Hulan

Reputation: 547

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>

Upvotes: 1

Related Questions