How to display a table with 3 columns in HTML template using a array of strings with Angular?

Question

I get data in the form of array [ 'one', 'two', 'three', 'four', 'five', 'six'] I want to display it in tabular format as follows,

    <table>
    <caption> Numbers:</caption>
    <tr>
        <td>one</td>
        <td>two</td>
        <td>three</td>
    </tr>
    <tr>
        <td>four</td>
        <td>five</td>
        <td>six</td>
    </tr>
    </table>

Can above template dynamically generated using ngFor & ngIf?

So at each ( index % 3 ) = 0 we will draw new row but how do we do that in HTML with angular directives?

The trick here is the incoming array may have any random number of strings.

AngularJS or Angular 2+ ?

Jivan
– Jivan

2019-06-12 09:14:44 +00:00
Commented Jun 12, 2019 at 9:14 — Jivan
– Jivan, Commented Jun 12, 2019 at 9:14
@Jivan Angular 2+

Prashant
– Prashant

2019-06-12 09:38:08 +00:00
Commented Jun 12, 2019 at 9:38 — Prashant
– Prashant, Commented Jun 12, 2019 at 9:38

Akash Srivastav · Accepted Answer · 2019-06-12 09:28:38Z

7

<table>
    <caption> Numbers:</caption>
    <ng-container *ngFor="let item of items; let i=index;">
        <tr *ngIf="i % 3 == 0">
            <ng-container *ngFor="let pos of [1, 2, 3]">
                <td *ngIf="i+pos < items.length">{{items[i+pos]}}</td>
            </ng-container>
        </tr>
    </ng-container>
</table>

I haven't tested this, but it should do it.

answered Jun 12, 2019 at 9:28

Akash Srivastav

7665 silver badges17 bronze badges

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

1 Comment

Prashant Over a year ago

Just minor correction use index 0 instead of 1 for let pos of [1, 2, 3]

Ghoul Ahmed · Accepted Answer · 2019-06-12 09:38:16Z

1

Try this (TS file):

  data = ['one', 'two', 'three', 'four', 'five', 'six'];
  results: any[] = [];

  constructor() {
    this.results = this.groupColumns(this.data);
  }

  groupColumns(arrays) {
    const newRows = [];
    for (let index = 0; index < arrays.length; index += 3) {
      newRows.push(arrays.slice(index, index + 3));
    }
    return newRows;
  }

in HTML:

<table>
    <caption> Numbers:</caption>
    <tr *ngFor="let result of results">
        <td>{{result[0]}}</td>
        <td>{{result[1]}}</td>
        <td>{{result[2]}}</td>
    </tr>
</table>

Working Demo

answered Jun 12, 2019 at 9:38

Ghoul Ahmed

4,8342 gold badges17 silver badges25 bronze badges

2 Comments

Prashant Over a year ago

Thanks, @Ghoul, But what happens with 5,7 or 10 elements, will that go out of array index?

Ghoul Ahmed Over a year ago

@pcj, it 's work for any elements , you can test it (working demo)

Collectives™ on Stack Overflow

How to display a table with 3 columns in HTML template using a array of strings with Angular?

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related