user image

Rakshit
Published in : 2022-03-06

Angular: Change columns to rows, and rows to columns while running a *ngFor loop.

Angular

I want to make my columns as rows and rows as columns in the table view. How can I do that?

My data is given below;

data = [
{
	id: 1,
	name: 'Rakshit',
	age: 18
	salary: $15/hr
},
{
	id: 2,
	name: 'Ashish',
	age: 19
	salary: $18/hr
},
{
	id: 3,
	name: 'Pragnesh',
	age: 18
	salary: $20/hr
}
];

Using *ngFor I am able to make a table looks like below,

ID | Name | Age | Salary
1 | Rakshit | 18 | $15/hr
2 | Ashish  | 19 | $18/hr
3 | Pragnesh| 18 | $20/hr

I want to change columns to row, my expected output should be,

ID     |    1      |    2   |      3

Name   | Rakshit   | Ashish | Pragnesh

Age    | 18        | 19      |     18
Salary | $15/hr    | $18/hr  | $20/hr

How do I loop it to get above results?

Comments

There is no comments yet

Leave a comment

Join us

Join our community and get the chance to solve your code issues & share your opinion with us

Sign up Now

Related posts

How to call event handler onload for Angular application?
Publish date: 2022-03-02 | Comments: 2

Tag: Angular

Angular - PrimeNG charts adding colors for each legends dynamically
Publish date: 2022-02-27 | Comments: 1

Tag: Angular

In Angular project, RxJS isStopped is deprecated! What is the alternative?
Publish date: 2022-02-28 | Comments: 1

Tag: Angular

Adding country flags is really struggling thing?
Publish date: 2022-02-25 | Comments: 6

Tag: Angular

Static code analysis tools integration with latest Angular version
Publish date: 2022-02-25 | Comments: 1

Tag: Angular

Import Swiper into Angular causes error
Publish date: 2022-03-05 | Comments: 1

Tag: Angular