asked on

Dynamic Column using ngFor in Angular?

In Angular, Can I Create a Dynamic Table using Static and Dynamic Column header?

From the above example- Name and department are static content(hardcode values), 01.01.2015 , 01.02.2016, 01.03.2016 are dynamic content to be iterated using ngfor.

please provide solution in Angular 5

Swatantra Bhargava

Try below code:

dateArray : Your value array which is created in your ts file.

<table class="table" style="width:100%;">
<thead>
	<tr>
		<th>Name</th>
		<th>Department</th>
		<th>&nbsp;</th>
		<th>&nbsp;</th>
		<th>&nbsp;</th>
	</tr>
</thead>
<tbody>
	<tr *ngFor="let dtArray of dateArray">
		<td></td>
		<td></td>
		
		<td>{{dtArray.FirstDate}}</a></td>
		<td>{{dtArray.SecondDate}}</a></td>
		<td>{{dtArray.ThirdDate}}</a></td>
	</tr>
</tbody>
</table>

Open in new window

Julian Hansen

I don't understand the problem - you have not shown us a big enough sample of your table.

*ngFor will be used to generate the rows - you can put whatever you like in those rows - static content or data from the array you are iterating over.

What is the actual problem?

ASKER CERTIFIED SOLUTION

Debasis Saha

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Rajdeep Saha

ASKER

Thanks for the concept.. it solve my problem...