locked
How to apply red color font to specific column for dynamic data? RRS feed

  • Question

  • User696604810 posted


    I work on angular 7 app I need to apply red color font to specific column

    but i dont know how to do that ?

    I show data dynamically meaning no fixed column or data and code below working without any issue

    my main thing i need is if column name='onlineurl' make font color to red

    my code as below data source on ts as below :

    this._displayreport.GetReportDetailsPaging(this.searchData).subscribe((data: any[]) => {
    
    this.reportdetailslist = data;
    
    this.headerCols = Object.keys(data[0]);
    
    data.forEach((item) =>{ 
    let values = Object.keys(item).map((key)=> item[key]).filter(item =>item != data[0].totalCount)
    
    this.contentBody.push(values);
    
    
    });
    
    
    });



    to get header without data i do as below :

    <thead style="width: max-content"> 
    <tr> 
    <th *ngFor="let coln of headerCols"> 
    <ng-container *ngIf="coln != 'totalCount'">
    
    {{coln}} 
    </ng-container> 
    </th> 
    </tr>
    
    
    </tr> 
    </thead>



    to get content data without header i do

    <tr *ngFor="let rep of contentBody">
    
    <td *ngFor="let r1 of rep"><span>{{r1}}</span></td>
    
    <td
    </tr>

    Wednesday, May 20, 2020 2:36 AM

All replies

  • User303363814 posted

    Add a css class which does the formatting you want

    .drawAttention {
       color: rgba(200,0,0, .8);
       font-weight: 700;
    }

    Now you can selectively add that class to your html element.

    <span [class.drawAttention]="colname === 'superiorColumnName'">If the colname matches this will drawAttention</span>

    You could do it by selectively applying a style [style.color]="colname === 'whatever' ? 'red' : 'black'" but using a class is a much better way to go - more flexible, centralises formatting, easier to read, etc.

    Wednesday, May 20, 2020 11:25 PM