'Style and anchor tag are not applied on data in Angular

I have a modal containing a datatable with 2 columns, one of them I'd like to apply a color following a condition on its value, the other, i'd like to put in an anchor tag with the link described by the attribute "link". All the data is valid and displayable, although the color and the anchor tag are not applied.

Here is the HTML code for the modal and the datatable :

<div class="modal " bsModal #detailsModal="bs-modal" [config]="{backdrop: 'static'}">
  <div class="modal-dialog modal-xl">
    <div class="modal-content bg-gray" [ngStyle]="{opacity:'85%'}">
      <div class="modal-header">
        <h4 [ngStyle]="{color:'white',fontStyle:'strong'}" class="modal-title pull-left">Details</h4>
        <button type="button" class="close pull-right" (click)="detailsModal.hide()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <h4 [ngStyle]="{color:'white'}" *ngIf="cves.length===0">No CVE available</h4>
        <ngx-datatable *ngIf="cves.length>0" class="table table-striped table-hover" [rows]="cves"
          [reorderable]="false" [swapColumns]="false" [headerHeight]="50" [footerHeight]="50" [rowHeight]="'auto'"
          [limit]="5" [messages]="" [myTotal]="cves.length">
          <ngx-datatable-column  width="400" name="CVE" prop="value">
            <ng-template let-row="row" >
              <a href="/cve/{{row.link}}/">{{row.value}}</a>
            </ng-template>
          </ngx-datatable-column>

          <ngx-datatable-column  width="300" name="cvss3" prop="cvss3_base_score">
            <ng-template let-row="row">
              <div [ngClass]="{'lowcve': row[0] >= 0 &&row[0]<4,
                'mediumcve': row[0] >= 4 &&row[0]<7,
                'highcve': row[0] >= 7} " *ngIf="row[0]!==-1">
                {{row.cvss3_base_score}}</div>
            </ng-template>
          </ngx-datatable-column>
        </ngx-datatable>
      </div>
    </div>
  </div>
</div>

and here are the classes in the css file:

.nonecve {
  font-size: 18px;
  font-weight: bold;
  color: $low-color;
}
.lowcve {
  font-size: 18px;
  font-weight: bold;
  color: $low-color;
}
.mediumcve {
  font-size: 18px;
  font-weight: bold;
  color: rgb(250, 230, 0);
}
.highcve {
  font-size: 18px;
  font-weight: bold;
  color: orange;
}
.criticalcve {
  font-size: 18px;
  font-weight: bold;
  color: red;
}

Much appreciated.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source