CODEWITHSUNDEEP
angulartwitter-bootstrap
r3plica
r3plica

Reputation: 13367

angular ngFor with tables using bootstrap and different row types

I have this table:

<div class="table-responsive" *ngIf="rows">
  <table class="table table-borderliness table-product">
    <tbody>
      <tr class="d-flex" *ngFor="let row of rows">
        <td class="d-flex align-items-center justify-content-center col-3" [class.table-active-primary]="column.class" *ngFor="let column of row.columns; let i = index" [scope]="i ? '' : 'row'">
          <div [ngSwitch]="row.description.length && !i">
            <span *ngSwitchCase="0">{{ column.name }}</span>
            <span *ngSwitchDefault>
              <a href="#" (click)="showDescription($event, column.name)">{{ column.name}} <i class="far fa-plus-square"></i></a>
            </span>
          </div>
        </td>  
      </tr>
    </tbody>
  </table>
</div>

Which lists a load of rows with 5 columns. Which looks something like this:

https://codepen.io/r3plica/pen/yRzpGy

Now, between each row, I would like to insert another "type" of row, which only has 1 column (with a colspan of 5) like this:

https://codepen.io/r3plica/pen/oaGpRo

I am struggling to do this because you can't have multiple * on one line (for example *ngFor and *ngIf.

Is there a way to do this? I did think of wrapping my tr in a span or something, but it throws out my styling.

Upvotes: 0

Views: 1229

Answers (2)

Suresh Kumar Ariya
Suresh Kumar Ariya

Reputation: 9764

With the help of *ngContainer

<div class="table-responsive" *ngIf="rows">
  <table class="table table-borderliness table-product">
    <tbody>
      <ng-container *ngFor="let row of rows">
      <tr class="d-flex">
        <td class="d-flex align-items-center justify-content-center col-3" [class.table-active-primary]="column.class" *ngFor="let column of row.columns; let i = index" [scope]="i ? '' : 'row'">
          <div [ngSwitch]="row.description.length && !i">
            <span *ngSwitchCase="0">{{ column.name }}</span>
            <span *ngSwitchDefault>
              <a href="#" (click)="showDescription($event, column.name)">{{ column.name}} <i class="far fa-plus-square"></i></a>
            </span>
          </div>
        </td>  
      </tr>
        <tr class="d-flex">
        <td class="d-flex align-items-center justify-content-center col-3" [class.table-active-primary]="column.class"> This is one column
        </td>  
      </tr>
    </ng-container>
    </tbody>
  </table>
</div>

Upvotes: 0

Ploppy
Ploppy

Reputation: 15353

I don't quite understand what you are asking but there is quick workaround for multiple structural directives.

You can use the <ng-container> element which create no DOM node.

<ng-container *ngIf="myCondition">
  <div *ngFor="let item of items">...<div>
</ng-container>

The code above will generate a list of div when the condition is fulfilled.

Upvotes: 1

Related Questions