Search code examples
htmlangulartypescriptscss-lint

Hide or Show Transfer Icon

I am trying to Hide Transfer Button If an account is a negative value or Show Transfer if an account is a positive value.

I want to check if the amount is negative then Hide Transfer Button if the amount is positive then show Transfer Button

HTML

<div class ="content">
         <span class ="negative-account" *ngIf="account?.primaryValue! <= 0">-</span>
              <span class="dollar-sign">$</span>
                    {{account?.primaryValue | currency: '': '' | absolute }}
</div>
<div class="transfer"
     *ngIf="showTransferLink"
   <div> Transfer</div>
</div>

Typescript

export class AccountComponent {
private _showTransferLink = false;

@Input ()
public set showTransferLink(showTransferLink: boolean) {
    this._showTransferLink = attributeToBoolean(showTransferLink);
}

public get showTransferLink() {
return (
  this._showTransferLink &&
  this.account
);
}
Solution

  • I see that you already show or hide a minus based on the value of the account. Why not apply the same logic to the button?

    <div class="transfer" *ngIf="account?.primaryValue >= 0">
   <div>Transfer</div>
</div>

    This should show or hide the button if the primaryValue of the account is less or more than 0