Angular - using ngFor to display data with column and row headers

Question

I´m having problem displaying data inside the table which has column and row headers. I´m trying to make it dynamic by using *ngFor. Can you suggest how to handle *ngFor in this case?

Ts file with data:

export class NewScreen {
  rows = [
    'Name',
    'Surname',
    'Subjects',
    'Grade',
  ];

  data = [
    {
      student: 'Student 1',
      name: 'Alex',
      surname: 'Smith',
      subjects: ['Math','Geometry'],
      grade: ['A','B'],
    },
    {
      student: 'Student 2',
      name: 'Michael',
      surname: 'Laurent',
      subjects: ['Math','Geometry'],
      grade: ['B','C'],
    },
    {
      student: 'Student 3',
      name: 'Sophie',
      surname: 'Miller',
      subjects: ['Math','Geometry'],
      grade: ['A','A'],
    },
  ];
}

HTML: I have been trying to find solution to put inside {{???}} which would result in displaying following table structure, but with no luck:

<table>
  <thead>
     <tr>
        <th></th>
        <th *ngFor="let column of data">{{ column.student }}</th>
     </tr>
  </thead>
  <tbody>
     <tr *ngFor="let row of rows">
         <th>{{ row }}</th>
         <td *ngFor="let value of data | keyvalue">{{ value.value[i + 1] }}</td>
     </tr>
  </tbody>
</table>

Have you heard of the KeyValue pipe. angular.io/api/common/KeyValuePipe — Dahir Warsame
– Dahir Warsame, Commented Feb 21, 2022 at 16:54
Hi Dahir. I have edited the code based on your suggestion, but the data in the table is not being displayed. Is my edited code above correct? — Victoria
– Victoria, Commented Feb 21, 2022 at 17:05
If I put {{ item.value }} only, it is displayed like this: [object Object] for each field — Victoria
– Victoria, Commented Feb 21, 2022 at 17:07

HassanMoin · Accepted Answer · 2022-02-21 17:51:54Z

3

I created a simple example from the HTML and data you provided https://stackblitz.com/edit/angular-vuzjyk

The reason {{ item.value }} shows [object Object] is because you didn't give it an identifier to pick the property of that object you wish to display.

To simplify, I updated your rows[] to match the keys of your data to use it directly.

  rows = ['name', 'surname', 'subjects', 'grade'];

In the HTML I simply use that row to identify the property we wish to display. Also in <th> I capitalize the first alphabet of each header.

   <tr *ngFor="let row of rows">
       <th>{{ row.charAt(0).toUpperCase() + row.slice(1) }}</th>
       <td *ngFor="let item of data">
           {{ item[row] }} 
       </td>
   </tr>

Check out the stackblitz link I gave above, if you have any queries feel free to ask.

answered Feb 21, 2022 at 17:51

HassanMoin

2,2341 gold badge10 silver badges17 bronze badges

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

4 Comments

Victoria Over a year ago

This looks amazing! Thank you very much. :)

Victoria Over a year ago

Maybe just 1 additional question - How would I manage matching identifier in case I have 2 words identifier, say First name?

HassanMoin Over a year ago

if the identifier comes as First name in the data, you can simple add rows = ['name', 'surname', 'subjects', 'grade', 'First Name']; in your rows list, or that wasn't your question ?

Victoria Over a year ago

For the attribute name inside the object of data array, I can only use camel case so then it wouldn't match with First Name, but I solved it with the custom pipe :)

Collectives™ on Stack Overflow

Angular - using ngFor to display data with column and row headers

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related