I need to implement a specific class on the td based on if else condition. If you see my code I am looping through th and td elements. I need to either blank the text in the th or set the color to white if the th class name equals Legal Class ID so that header text is not visible. I have created a class called cellbgcolor. I need to apply only if the header text is Legal Class ID for all others it should apply class tableItem bold. How do I do that. I have shared the html and jsfiddle below

html

  <style>
      .cellbgcolor {
        color: white;
    }
   </style>

    <div *ngIf="LegalFundClasses && LegalFundClasses.LegalFundClassDetailsViewModel && ColumnNames">
         <table class="fundClassesTable table-striped">
          <tr *ngFor="let c of ColumnNames">
            <th class="tableItem bold">{{ c }}</th>
            <ng-container *ngFor="let f of LegalFundClasses.LegalFundClassDetailsViewModel; let i=index">
              <td class="tableItem" *ngIf="c == ColumnNames[0]">{{f.Description}}</td>
              <td class="tableItem" *ngIf="c == ColumnNames[1]">{{f.AuditSummary}}</td>
              <td class="tableItem" *ngIf="c == ColumnNames[2]">{{f.Id}}</td
            </ng-container>
          </tr>
        </table>
      </div>

 Component



  public ColumnNames: string[] = ['Legal Class Name',
                                    'Last Edited',
                                    'Legal Class ID'
                                  ];

Here is the JSFiddle

https://jsfiddle.net/zyk9xhd1/2/

3 Answers

0
Никита Середа On

try something like this:

<td [class.tableItem]="booleanCondition" [class.cellbgcolor]="booleanCondition">...</td>

or

<td [class]="booleanCondition ? 'tableItem' : 'cellbgcolor'">...</td>
0
Community On

Try this, hope this helps..

<th [ngClass]="{'cellbgcolor':c == ColumnNames[2],'tableItem bold':c != ColumnNames[2]}">{{ c }}</th>

OR

<th [ngClass]="c == ColumnNames[2] ? 'cellbgcolor' : 'tableItem bold'">...</th>
0
Hiren Vaghasiya On

Use ngClass

`<th [ngClass]="c == ColumnNames[2] ? 'cellbgcolor' : 'tableItem bold'">{{ c }}</th>`

Updated Fiddle