Apply CSS styles conditionally in AngularJS

/Users/shama.ahlawat/ig/cet-fe/packages/my-ig-fe/src/common/components/addFundsButton/AddFundsButtonController.ts

import { ClientTypes, LoadableValueStatus } from '@cet/interfaces';
import {
  Account,
  Client,
  FunctionalityAvailabilityStatus,
} from '@cet/services';
import { StateService } from '@uirouter/angularjs';
import { RoadblocksPopupService } from '@cet/modules';
import AppDynamicsTrackingService from 'common.services.tracking.AppDynamicsTrackingService';
import StatefulClientService from 'common.services.client.StatefulClientService';
import { AccountFunctionality } from '@cet/constants';

const paymentsDepositRoute = 'app.monetary.payments.deposit';
const paymentsTransferFunds = 'app.monetary.payments.transfer-funds';
const paymentsDepositLabel = 'payments.deposit';

export default class AddFundsButtonController {

  public static $inject = [
    '$state',
    'common.services.tracking.AppDynamicsTrackingService',
    'common.services.client.StatefulClientService',
  ];

  public account: Account;

  public get formattedAccountName(): string {
    return this.account.name.toLowerCase().replace(/[\s]+/g, '-');
  }

  public get cannotFund(): boolean {
    if (this.account.isDisabled) {
      return true;
    }

    const requestedAccountFunctionality = this._getRequestedAccountFunctionality();
    const canFund = this.account.canAccessPaymentsMethod(requestedAccountFunctionality);
    return canFund !== FunctionalityAvailabilityStatus.Available &&
      canFund !== FunctionalityAvailabilityStatus.NotAvailableBehindRoadblocks;
  }

  constructor(
    private _$state: StateService,
    private _appDynamicsTrackingService: AppDynamicsTrackingService,
    private _statefulClientService: StatefulClientService,
  ) {
  }

  public get shouldUseButtonStyles(): boolean {
    return this.account.client.isTastyFx;
  }

  public onClick(): void {
    if (this.account.isDisabled) {
      return;
    }
    const requestedAccountFunctionality = this._getRequestedAccountFunctionality();
    const canFund = this.account.canAccessPaymentsMethod(requestedAccountFunctionality);
    if (canFund === FunctionalityAvailabilityStatus.Available) {
      this._goToFunding();
    } else if (canFund === FunctionalityAvailabilityStatus.NotAvailableBehindRoadblocks) {
      RoadblocksPopupService.openPopup();
    }
  }

  public getAddFundsLabel(): string {
    if (this.account.clientType === ClientTypes.DEMO) {
      return 'Overview.demo-accounts.add-funds';
    }
    return 'Overview.accounts.add-funds';
  }

  private _goToFunding(): void {
    this._appDynamicsTrackingService.start(AppDynamicsTrackingService.ADD_FUND_PAGE_LOAD);

    const targetRoute = this.account.isMt5 ? paymentsTransferFunds : paymentsDepositRoute;
    this._$state.go(targetRoute, {
      accountId: this.account.id,
      clientType: this.account.clientType,
    });
  }

  public get isCompanyIdAU(): boolean {
    const client: Client =this._statefulClientService.getClient(this.account.clientType);
    return client?.igCompanyId === 'igau';
}

private _getRequestedAccountFunctionality() {
  return this.account.isMt5 ? AccountFunctionality.PaymentsTransferFunds : AccountFunctionality.PaymentsDeposit;
}
}

/Users/shama.ahlawat/ig/cet-fe/packages/my-ig-fe/src/common/components/addFundsButton/addFundsButton.tpl.html

<button data-e2e="add-funds"
   
   type="button"
   ng-class="{
     'add-funds-button-au': controller.isCompanyIdAU,
     'add-funds-button': !controller.isCompanyIdAU,
     'add-funds-button-disabled': controller.cannotFund,
     'btn': controller.shouldUseButtonStyles,
     'non-btn gap-b-1 small clickable': !controller.shouldUseButtonStyles,
     'btn-opaque': controller.account.balance > 0,
     'btn-blue': controller.account.balance <= 0,
    }"
   ng-click="controller.onClick()">

  <span class="icon" ng-if="!controller.isCompanyIdAU"
        ng-class="{
          'icon-add-funds': !controller.shouldUseButtonStyles || controller.account.balance > 0,
          'icon-add-funds-white': controller.shouldUseButtonStyles && controller.account.balance <= 0,
          }"
        ig-click-tracking="addFundsLinkIcon"></span>
  <span class="icon icon-add-funds-white" ng-if="controller.isCompanyIdAU"
        ng-class="{
          'icon-add-funds-au': controller.isCompanyIdAU
          }"
        ig-click-tracking="addFundsLinkIcon"></span>
  <span class="demi-bold-extra-extra-small add-funds-label"
        ig-click-tracking="addFundsLinkText">{{controller.getAddFundsLabel() | igI18n}}</span>
</button>

add-funds-button.less

#my-ig {
  .add-funds-button {
    &.non-btn {
      line-height: 22px;
      position: relative;

      .add-funds-label {
        vertical-align: middle;
      }

      &:hover:after {
        content: '';
        position: absolute;
        right: 0;
        left: 23px;
        height: 1px;
        background: #3987CC;
        bottom: 0;
      }
    }

    &.btn {
      align-items: center;
      box-shadow: 0 2px 2px @COLOR_TRANSPARENT_PRIMARY;
      display: flex;
      font-size: 11px;
      gap: 5px;
      height: auto;
      justify-content: center;
      line-height: 2;
      margin-top: 5px;
      padding-left: 0;
      padding-right: 0;
      position: relative;
      text-align: center;
      width: 90%;

      .add-funds-label {
        font-size: 13px;
      }
    }

    &-disabled {
      cursor: default;
      opacity: 0.4;
      &:hover:after {
        display: none;
      }
    }
  }

  .add-funds-button-au {
    border-radius: 4px 0 0 4px;
    background-color: #3987CC;
    border: 1px solid #0F4371;
    border-right: none;
    color: #ffffff;
    cursor: pointer;
    display: block;
    font-size: 13px;
    margin-top: 18px;
    box-shadow: 0 2px 2px rgba(38, 38, 41, 0.15);
    overflow: hidden;
    white-space: nowrap;
    width: 96%;
    text-overflow: ellipsis;
    border-right: 1px solid #0F4371;
    border-radius: 4px;
    line-height: 28px;
    display: flex;
    justify-content: center;
    align-items: center;

    &:focus {
      box-shadow: inset 0 0 0 1px @COLOR_WHITE;
      outline:none;
    }

    &:hover {
      background-color: @COLOR_BLUE350;
      border-color: @COLOR_BLUE800;
    }
    
    &.non-btn {
      line-height: 28px;
      position: relative;

      .add-funds-label {
        vertical-align: middle;
      }

      &:hover:after {
        content: '';
        position: absolute;
        right: 0;
        left: 23px;
        height: 1px;
        background: #3987CC;
        bottom: 0;
      }
    }

    &.btn {
      align-items: center;
      box-shadow: 0 2px 2px @COLOR_TRANSPARENT_PRIMARY;
      display: flex;
      font-size: 11px;
      gap: 5px;
      height: auto;
      justify-content: center;
      line-height: 2;
      margin-top: 5px;
      padding-left: 0;
      padding-right: 0;
      position: relative;
      text-align: center;
      width: 90%;

      .add-funds-label {
        font-size: 13px;
      }
    }

    &-disabled {
      cursor: default;
      opacity: 0.4;
      &:hover:after {
        display: none;
      }
    }
  }
}