Change cell text in table depending on boolean value – Html

November 8, 2021

I have a table that displays the properties from an object. I would want to know if there is an easy way of changing the text the cell display instead of the true/false that the value is set to.

Example. I have a column that informs if the object is open(true) or closed(false).
Instead of showing true/false I would like to show open/closed.

The column is "State". It is a boolean attribute.
Is it possible to make this only on the html or should I change something in the component file? (It’s angular)

<table class="table table-dark table-condensed table-bordered table-striped table-hover">
  <thead>
    <tr>
      <th scope="col">Id</th>
      <th scope="col">Name</th>
      <th scope="col">Description</th>
      <th scope="col">State</th>
      <th scope="col">Resolved By</th>
      <th scope="col">Hours to resolve</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let bug of bugs">
      <th scope = "row">{{bug.id}}
      <td>{{bug.name}}</td>
      <td>{{bug.description}}</td>
      <td>{{bug.state}}</td>
      <td>{{bug.resolvedBy}}</td>
      <td>{{bug.hoursToResolve}}</td>
    </tr>
  </tbody>
</table>
</div>

Thanks!

>Solution :

Great example for a ternary operator:

<table class="table table-dark table-condensed table-bordered table-striped table-hover">
      <thead>
        <tr>
          <th scope="col">Id</th>
          <th scope="col">Name</th>
          <th scope="col">Description</th>
          <th scope="col">State</th>
          <th scope="col">Resolved By</th>
          <th scope="col">Hours to resolve</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let bug of bugs">
          <th scope = "row">{{bug.id}}
          <td>{{bug.name}}</td>
          <td>{{bug.description}}</td>
          <td>{{bug.state ? 'True Value Here' : 'False Value Here'}}</td>
          <td>{{bug.resolvedBy}}</td>
          <td>{{bug.hoursToResolve}}</td>
        </tr>
      </tbody>
    </table>
    </div>