conditional css (dynamic) bason on json-CodePudding

The table <div class="cellSubText secondary-text {{cssSubCell}}" >{{cellData[subId]}}</div> from my table-multi-sort-cell-default.component.html using the cssClass from the tableOptions which is the cssSubCell: 'c-black fs-14px'

How we construct a conditional css based on my tableOptions cssSubCell

for example cssSubCell: 'c-black fs-14px' should only work if subId !== 'test'

I tried below, but the condition does not work or recognized , is my CSS condition structure and implementation correct?

cssSubCell: 'c-black fs-14px : subId !== "test"

#this CSS works but I want it to be condition

cssSubCell: 'c-black fs-14px'

#component A tableOptions

this.tableOptions = {
      columns:[
        {id:'name',name:'Deal Letter',subId:'dealType', subtitle:'Deal Type'},
        {id:'annualRentCurrent',name:'Annual Rent (Current)', subId: 'annualRentProposed', subtitle:'Annual Rent (Proposed)'},
        {id:'firmTermRemainingCurrent',name:'Firm Term Remaining (Current)', subId: 'proposedTerm', subtitle:'Firm Term Remaining(Proposed)'},
        {id:'maxAvailableTerm',name:'Max Available Term (Current)' , subId:'proposedMaxAvailableTerm', subtitle: 'Max Available Term (Proposed)'},
        {id:'cashContribution',name:'Cash Contribution'},
        {id:'cashFlow',name:'Store Cash Flow'},
        {id:'action', name: 'Actions', actions:[
          {icon:'file_copy', name:'Copy', class:'primary-color' , },
          {icon:'delete', name: 'Delete', class:'mat-error ml-7px'},
          {icon:'forward', name: 'For Approval', class:'primary-color'}
        ]}
      ],
      cssClass: {
        cssCell:'',
        cssSubCell: 'c-black fs-14px'
      }
    }

#table screenshot

enter image description here

#table-multi-sort-cell-default.component.html

<div class="{{cssCell}}">{{cellData[id]}}</div>
<div class="cellSubText secondary-text {{cssSubCell}}" >{{cellData[subId]}}</div>

#table-multi-sort.component.html

<ng-container *ngFor="let column of table.columns" [matColumnDef]="column.id">
      <mat-header-cell class="table-multi-sort-header" *matHeaderCellDef [mat-multi-sort-header]="column.id"> 
        <div>{{column.name}}</div> 
        <div class="sub-text">{{getColumnSubtitle(column.id)}}</div>
      </mat-header-cell>
      <mat-cell *matCellDef="let row" (click)="editRow(row)">
          <ng-container *ngIf="column.id !== 'action'; then col; else actionCol"></ng-container>
          <ng-template #col>
            <app-table-multi-sort-cell-default [cellData]="row"  [id]="column.id" [subId]="getColumnSubId(column.id)" [cssCell]="cssClass.cssCell" [cssSubCell]="cssClass.cssSubCell" ></app-table-multi-sort-cell-default>
          </ng-template>
          <ng-template #actionCol>
            <app-table-multi-sort-cell-action [rowData]="row" [actions]="getActions(column.id)" (actionClickEvent)="clickTableAction($event,row)"></app-table-multi-sort-cell-action>
          </ng-template>
      </mat-cell>
    </ng-container>

CodePudding user response：

You need to use ngClass

<div class="cellSubText secondary-text" [ngClass]="{'c-black fs-14px' : subId !=='dealType'}">
  {{cellData[subId]}}
</div>