<h3><span class="dataList__headerbdr"></span>{{obj.heading}}</h3>

<div class="row feature-details" *ngIf="featureData; else nodata">
  <div class="col-6 feature-details__block" *ngIf="featureData.color">
    <div class="row">
      <div class="col-2 feature-details__block--image">
        <img *ngIf="featureData.color.image; else defaultExtImg" appDescriptiveCard [descriptiveCardProperties]="Color"
          src={{featureData?.color?.image}} class="" alt="">
        <ng-template #defaultExtImg>
          <img src='../../../../../assets/images/feature-no-img.jpg' appDescriptiveCard
            [descriptiveCardProperties]="featureData.color" class="img-fluid" alt="">
        </ng-template>
      </div>
      <div class="col-10 feature-details__block--content">
        <div class="row">
          <div class="col-9">
            <b>{{featureData?.color.optionClass}}</b>
            <br />
            {{featureData?.color.description}}</div>
          <div class="col-3 text-right feature-details__block--value">{{featureData?.color.price}}</div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-6 feature-details__block" *ngIf="featureData.trim">
    <div class="row">
      <div class="col-2 feature-details__block--image">
        <img *ngIf="featureData.trim.image; else defaultExtImg" appDescriptiveCard [descriptiveCardProperties]="Trim"
          src={{featureData?.trim?.image}} class="" alt="">
        <ng-template #defaultExtImg>
          <img src='../../../../../assets/images/feature-no-img.jpg' appDescriptiveCard
            [descriptiveCardProperties]="featureData.trim" class="img-fluid" alt="">
        </ng-template>
      </div>
      <div class="col-10 feature-details__block--content">
        <div class="row">
          <div class="col-9">
            <b>{{featureData?.trim.optionClass}}</b>
            <br />
            {{featureData?.trim.description}}</div>
          <div class="col-3 text-right feature-details__block--value">{{featureData?.trim.price}}</div>
        </div>
      </div>
    </div>
  </div>
</div>
<ng-template #nodata>
  No Data Available
</ng-template>

<div #modalContainer [style.top.px]="top" [style.left.px]="left" id="myModal" class="modal">
  <div class="modal-content">
    <span (click)="closeDialog()" class="close">&times;</span>
    <p>Some text in the Modal..</p>
  </div>
</div>