Closing HTML Tag with Angular ng-if directive

Question

i have a conditional table with a td that i want to close before or after some events. With NG-IF directive i can't do it because of i close the TD tag into NG-CONTAINER. Is possible to do this?

I cut here only a part of code. One solution can be to enclose all and into a to have conditional rapresentation but ther's a lot of code before

<ng-container>
  <td>
    some other code
    <ng-container *ngIf="riga.value['type'] === 'title';else other">
       {{riga.value['description']}}
         </td>
    </ng-container>
    <ng-template #other>
      <ng-container>
         {{riga.value['otherdescription']}}
           </td>
      </ng-container>
    </ng-template>
</ng-container>

`some other code {{riga.value[riga.value['type'] === 'title' ? 'description' : 'otherdescription']}}` — Reactgular, May 09 '19 at 13:55

score 3 · Accepted Answer · answered May 09 '19 at 13:20

Well, no. Angular specifically checks that all tags are either self closed or closed for the sake of compilation.

Closing the TD after the *ngIf makes a lot more sense too.

  <td>
    some other code
    <ng-container *ngIf="riga.value['type'] === 'title';else other">
       {{riga.value['description']}}
    </ng-container>
    <ng-template #other>
         {{riga.value['otherdescription']}}
    </ng-template>
 </td>

score 0 · Answer 2 · answered May 09 '19 at 13:21

As per HTML specifications or Angular this doesn't seem right, any point of time you will have only one ng-container inside <td> so close your td after the containers are closed :

<ng-container>
  <td>
    some other code

     <ng-container *ngIf="riga.value['type'] === 'title';else other">
       {{riga.value['description']}}
    </ng-container>

    <ng-template #other>
      <ng-container>
         {{riga.value['otherdescription']}}

      </ng-container>
    </ng-template>

 </td>
</ng-container>

Closing HTML Tag with Angular ng-if directive

2 Answers2