Data is not displaying while data is been received from api on toggle button call

The reason: view is displayed before the data is being loaded from the API. So, you can add the *ngIf directive to wait for it. Also, if you have used OnPush strategy, you might need to use manual change detection. Toogle showData as per the usage.

<div *ngIf="showData" class="payment-history-right ml-auto">
      <a class="trigger-dropdown" href="#{{card?.id}}" data-toggle="collapse" data-target="#{{card?.id}}" (click)="getCardById(card?.id)">
        <i class="fa fa-chevron-down "></i>
      </a>
    </div>
  </div>
  <div id="{{card?.id}}" class="payment-history-item-detail collapse">
    <div class="row">
      <div class="col-md-6">
        <div class="ph-item-detail-title">Name on card</div>
        <div class="ph-item-detail-desc">{{cardById?.name}}</div>
      </div>
      <div class="col-md-6">
        <div class="ph-item-detail-title">Billing Address</div>
        <div class="ph-item-detail-subtitle">{{cardById?.other.nameOnCard}}</div>
        <div class="ph-item-detail-desc">
          {{cardById?.other.address1}} <br />
          {{cardById?.other.address2}}, <br />
          {{cardById?.other.city}}, <br />
          {{cardById?.other.state}}-{{cardById?.other.zipcode}} <br />
        </div>
      </div>

In your component file:

public showData: boolean = false;
public cardById: any

 getCardById(cardId) {
this._transactionService.getCardById(cardId).subscribe((response) => {
  if (!this._commonService.isEmptyObject(response)) {
    this.cardById = new CardDecrypt();
    cardById.other = new Other();
    cardById.maskedCardNumber = this._commonService.decrypt(response?.maskedCardNumber);
    cardById.expirationMonth = this._commonService.decrypt(response?.expirationMonth);
    cardById.expirationYear = this._commonService.decrypt(response?.expirationYear);
    cardById.fourDigit = cardById.maskedCardNumber.slice(cardById.maskedCardNumber.length - 4);
    cardById.default = response?.default;
    cardById.id = response?.id;
    cardById.name = response?.name;
    cardById.type = response?.type;
    cardById.other.address1 = (response.other.address1 != '') ? this._commonService.decrypt(response?.other.address1) : '';
    cardById.other.address2 = (response.other.address2 != '') ? this._commonService.decrypt(response?.other.address2) : '';
    cardById.other.city = (response.other.city != '') ? this._commonService.decrypt(response?.other.city) : '';
    cardById.other.country = (response.other.country != '') ? this._commonService.decrypt(response?.other.country) : '';
    cardById.other.nameOnCard = (response.other.nameOnCard != '') ? this._commonService.decrypt(response?.other.nameOnCard) : '';
    cardById.other.number = (response.other.number != '') ? this._commonService.decrypt(response?.other.number) : '';
    cardById.other.state = (response.other.state != '') ? this._commonService.decrypt(response?.other.state) : '';
    cardById.other.zipcode = (response.other.zipcode != '') ? this._commonService.decrypt(response?.other.zipcode) : '';
    console.log(cardById);
    this.showData = true; // it will update the view 
  }
  else {

  }
});