angularjs/font-awesome: how to display an extra table cell with exclamation symbol indicating error

Question

I have a question.

I currently have an html view that displays data from a web api response.

Some validation occurs when the data is returned. The elements in the array, that contain errors, are marked by an element called IsValid = true/false.

When in the html table, within the ng-repeat (using the aforementioned array), if the IsValid element brings a false value, then that table row is emphasized by writing the cell border with red color.

I was thinking that it would be cool to instead that highlighting the border with red, display a symbol such as a warning "!" sign to let the user know that the row contains some faulty data.

I do display a message to let them know how the data needs to be correctly formatted if they expect a successful submit. That is already there. My goal is to learn how to instead that showing a red border around the bad data cells, an font-awesome alert icon. But I do not know how to do this, the way I think about it is, I need to show/hide the additional table cell with the "!" mark on the rows that contain an error, and not on the rows that pass validation. But I do not know how to manipulate the html object that way. I need to learn this, I need advise.

I think that it would be something similar to this:

<td ng-class="{'redColor': ai.IsValid === false}">{{ai.LegistarID}}</td>

Rather than applying a class for the background-color, I would apply a font awesome. Right? Again, I do not know, yet how to do this.

If someone could share, explain, teach me how to possibly do this, I am super thankful for your willingness to share your knowledge.

If I have made errors in the format, writing, explanation of my need, please I ask you to save your time scolding me. I am just trying my best, and humbly seeking for help.

I am including only the html where the ng-repeat and the use of IsValid value is used. I am not including any of the angularjs/ javascript code, but I can include it if need be.

HTML view:

<table class="table table-striped mt-4 mb-5" id="tblAgenda">
    <thead>
        <tr>
            <th scope="col" width="20%">ID</th>
            <th scope="col" width="20%">Agenda</th>
            <th scope="col">Blob</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="i in Items">
            <td scope="row" ng-class="{'redColor': ai.IsValid === false}">{{i.ID}}</td>
            <td ng-class="{'redColor': ai.IsValid === false}">{{i.Agenda}}</td>
            <td>{{i.Title}}</td>
        </tr>           
    </tbody>
</table>

CSS

.redColor { 
    border-color: #ac1d2c;
}

Answer 1

You can't add a font awesome class to a td element, so simply use ng-show or ng-hide on the icon element with your desired font awesome class.

<td>
    <i class=“fas fa-exclamation-triangle” ng-show=“!ai.IsValid”></i>
</td>