How to change one button to another if (click) is already busy?

Question

Angular

There is a table from which entries can be saved to the profile, or if saved, you can delete them.
Whether there is a record or not and which button to display is decided when the table is loaded.
And how to make the button change to the opposite one when clicking on the client?
The *ngIf and (click) directives are busy, I can't think of it.

ngx-datatable table column with button:

<ngx-datatable-column
   [width]="50"
   [resizeable]="false"
   [sortable]="false"
   [draggable]="false"
   [canAutoResize]="false"
>
   <ng-template let-row="row" let-rowIndex="rowIndex" let-show="show" ngx-datatable-cell-template>
       <div class="go-to-link">
           <a class="btn " href="{{row.link}}" target="_blank" title="Перейти к источнику"><i class="fas fa-external-link-alt fa"></i></a>
           <button *ngIf="isAddedToProfile(row)==false" class="btn btn-add"  (click)="addToProfile(rowIndex)"><i class="far fa-plus-square"></i></button>
           <button *ngIf="isAddedToProfile(row)==true" class="btn btn-add"  (click)="deleteFromProfile(rowIndex)"><i class="fas fa-minus-square"></i></button>
       </div>
   </ng-template>
</ngx-datatable-column>

Checking if the entry was previously saved to display the correct button on startup:

isAddedToProfile(row) {   
    return this.addedPersons.some(person => person.id === row.id);          
  }

Link to stackblitz

Answer 1

Why not make a wrap?
that is to hang up on click a function that calls several functions?