A guide on leveraging *ngFor in Angular 4 to assemble a table featuring 2 columns in every row

Question

A guide on leveraging *ngFor in Angular 4 to assemble a table featuring 2 columns in every row

I have an array of objects as shown below

let columns = [
    {id: 1, columnName: 'Column 1'}, 
    {id: 2, columnName: 'Column 2'}, 
    {id: 3, columnName: 'Column 3'}, 
    {id: 4, columnName: 'Column 4'}
];

My goal is to use Angular's *ngFor directive to generate a table in the following format:

<table>
    <tr>
        <td>Column 1</td>
        <td>Column 2</td>
    </tr>
    <tr>
        <td>Column 3</td>
        <td>Column 4</td>
    </tr>
</table>

I aim to have two columns per row. I attempted to use *ngFor on <tr>, but couldn't achieve my desired outcome. Can you guide me on the correct approach to accomplish this?

Thank You :-)

javascript angular typescript

Answer 1

Answer №1

If you want to achieve the desired structure in the view, one simple way is to modify the array's structure.

Here is a method to restructure the data:

tableData = columns.reduce((acc, col, i) => {
    if (i % 2 == 0) {
        acc.push({column1: col});
    } else {
        acc[acc.length - 1].column2 = col;
    }       
    return acc;
}, []);

Then, you can use the following code:

<table>
    <tr *ngFor="let row of tableData">
        <td>{{row.column1.columnName}}</td>
        <td>{{row.column2.columnName}}</td>
    </tr>
</table>

If you prefer not to alter the array, you could consider an alternative approach:

<table>
    <ng-container *ngFor="let col of columns; let i = index">
        <tr *ngIf="i % 2 == 0">
            <td>{{col.columnName}}</td>
            <td>{{i < columns.length - 1 ? columns[i + 1].columnName : ""}}</td>
        </tr>
    </ng-container>
</table>

Answer 2

If you want to achieve the desired structure in the view, one simple way is to modify the array's structure.

Here is a method to restructure the data:

tableData = columns.reduce((acc, col, i) => {
    if (i % 2 == 0) {
        acc.push({column1: col});
    } else {
        acc[acc.length - 1].column2 = col;
    }       
    return acc;
}, []);

Then, you can use the following code:

<table>
    <tr *ngFor="let row of tableData">
        <td>{{row.column1.columnName}}</td>
        <td>{{row.column2.columnName}}</td>
    </tr>
</table>

If you prefer not to alter the array, you could consider an alternative approach:

<table>
    <ng-container *ngFor="let col of columns; let i = index">
        <tr *ngIf="i % 2 == 0">
            <td>{{col.columnName}}</td>
            <td>{{i < columns.length - 1 ? columns[i + 1].columnName : ""}}</td>
        </tr>
    </ng-container>
</table>

Answer 3

Answer №2

In my opinion, converting your data into JSON format first would be beneficial. After that, you can easily implement the following code to achieve the desired output.

<table class='table' *ngIf="forecasts">
<thead>
    <tr>
        <th>Temp. (C)</th>
        <th>Temp. (F)</th>
    </tr>
</thead>
<tbody>
    <tr *ngFor="let forecast of forecasts">
        <td>{{ forecast.temperatureC }}</td>
        <td>{{ forecast.temperatureF }}</td>
    </tr>
</tbody>
</table>

Alternatively, you can also utilize the following code snippet with a different format:

<table>
<tbody *ngFor="let col of columns; let i = index">
    <tr *ngIf="i % 2 == 0">
        <td>{{col.columnName}}</td>
        <td>{{i < columns.length - 1 ? columns[i + 1].columnName : ""}}</td>
    </tr>
</tbody>
</table>

Answer 4

In my opinion, converting your data into JSON format first would be beneficial. After that, you can easily implement the following code to achieve the desired output.

<table class='table' *ngIf="forecasts">
<thead>
    <tr>
        <th>Temp. (C)</th>
        <th>Temp. (F)</th>
    </tr>
</thead>
<tbody>
    <tr *ngFor="let forecast of forecasts">
        <td>{{ forecast.temperatureC }}</td>
        <td>{{ forecast.temperatureF }}</td>
    </tr>
</tbody>
</table>

Alternatively, you can also utilize the following code snippet with a different format:

<table>
<tbody *ngFor="let col of columns; let i = index">
    <tr *ngIf="i % 2 == 0">
        <td>{{col.columnName}}</td>
        <td>{{i < columns.length - 1 ? columns[i + 1].columnName : ""}}</td>
    </tr>
</tbody>
</table>

A guide on leveraging *ngFor in Angular 4 to assemble a table featuring 2 columns in every row

Answer №1

Answer №2

Similar questions

Meteor is failing to update the data in MongoDB

Guide to assigning an integer value to a string in Angular

The issue with launching a Node.js server in a production environment

What is the appropriate utilization of the await keyword within concise if-else statements in JavaScript?

Button functionality works smoothly on desktop but experiences issues with multiple submissions on mobile devices such as iPhones

Collaborate on Typescript Interfaces within a Firebase development environment

What is the best way to trigger a modal to appear when dynamically generated items are clicked?

Angular 2: Enhancing User Experience with Pop-up Dialogs

Issue with the svg animation not properly "executing"

Using a comma as a parameter separator is not valid

Entity Framework AJAX Delete Functionality Fails to Operate

Tips for displaying an alert in the upcoming event loop

How can I adjust the font size of information retrieved from a JSON file using ng2-smart-table?

Invoking a function of a Redux-form React component

Encountering a TypeError: relativeURL.replace is not a valid function in Next.js

I am experiencing an issue where my code is not iterating over the data in my

Is it possible to enable password authentication on Firebase even if the user is currently using passwordless sign-on?

Setting the initial selection in an Angular 2 Select Component

Just incorporated Angular Material and Angular Animations into my project and encountered a slew of errors

Is there a way to monitor the home button press event within a PhoneGap application?