CODEWITHSUNDEEP
angular
Lino
Lino

Reputation: 115

Problem in Angular HTML template with ternary statement

I have a ternary statement in an Angular HTML template. But when the statement returns false, the data is not distributed to all 6 columns. 

<td colspan="getNrOfColumnHeaders() ? 8 : 6">
    {{(serverError ? 'SERVER_ERROR_TABLE_MSG' : 'NO_DATA') | translate}}
</td>

Anyone any idea what is going wrong?

Upvotes: 0

Views: 124

Answers (2)

Qortex
Qortex

Reputation: 7456

You need to bind to the attribute dynamically so that Angular knows it has to update the value when it changes, so you need [colspan] instead of colspan:

<td [colspan]="getNrOfColumnHeaders() ? 8 : 6">
  {{(serverError ? 'SERVER_ERROR_TABLE_MSG' : 'NO_DATA') | translate}}
</td>

Upvotes: 6

Skandar B.A
Skandar B.A

Reputation: 51

Be sure that getNrOfColumnHeaders return boolean and add brackets to colsap attribute like this.

 <td [attr.colspan]="getNrOfColumnHeaders() ? 8 : 6">
          {{(serverError ? 'SERVER_ERROR_TABLE_MSG' : 'NO_DATA') | translate}}
    </td>

Upvotes: 1

Related Questions