angular ngFor with tables using bootstrap and different row types

Question

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.

Ploppy · Accepted Answer · 2018-10-14 14:48:40Z

1

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.

answered Oct 14, 2018 at 14:48

Ploppy

15.4k6 gold badges44 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

r3plica Over a year ago

I did not know about the ng-container. Let me give it a whirl, if it works I will make this as the answer :)

Ploppy Over a year ago

Take your time :)

Suresh Kumar Ariya · Accepted Answer · 2018-10-14 14:58:31Z

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>

Collectives™ on Stack Overflow

angular ngFor with tables using bootstrap and different row types

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related