How to check and replace certain ngFor td text in angular 8

808 views Asked by At

I would like to know how to find certain td text and replace all of the texts with a new text in angular.

json

myData = [
   {
     "type": "toyota", 
     "year": "2013",
     "comment": "new"
   },
   {
     "type": "audi", 
     "year": "2013",
     "comment": "new"
   },
   {
     "type": "honda", 
     "year": "2019",
     "comment": "new"
   },
   {
     "type": "ford", 
     "year": "2019",
     "comment": "new"
   }
]

component.html

<div>
 <table >
   <tr *ngFor="list of myData$">
       <td>{{list.type}}</td>
       <td>{{list.year}}</td>
       <td>{{list.comment}}</td> //want to show "old" or " " instead of "new" for all cars with year "2013"
    </tr>
 <table>
</div>

Can contains() function works for such in .ts file?

4

There are 4 answers

7
Adrita Sharma On BEST ANSWER

Try like this:

Working Demo

<div>
 <table border="1">
   <tr *ngFor="let list of myData">
       <td>{{list.type}}</td>
       <td>{{list.year}}</td>
       <td>{{list.year < 2014 ? 'old' : list.comment}}</td> 
    </tr>
 </table>
</div>
0
Mustahsan On

You can use ternary conditional operator in interpolation:

<td>{{list.year <= 2013? "old": list.comment}}</td>
0
Harun Or Rashid On

Use ternary conditional operator condition? value1 : valu2 as below.

Live Demo

<div>
<table>
 <tr *ngFor="list of myData$">
   <td>{{list.type}}</td>
   <td>{{list.year}}</td>
   <td>{{list.year == 2013 ? 'old' : list.comment}}</td> // list.year <= 2013 if you wand to display 'odd' when year<=2013
</tr>
</table>
</div>
0
Jayakumar Thangavel On

For contains scenario, you can check using includes

{{list.year.includes("2013") ? 'old' : list.comment }}