How to create Angular Cli 4 dynamic table by *ngFor.?

Question

I am working in automation project using Angular CLI. How to create the dynamic columns and dynamic row table using the *ngFor.?

In previous version of angular like AngularJS. I had done this method with the help of AngularJS dynamic table with unknown number of columns

How to solve this?

So, you're asking how to use ngFor? Why don't you read the angular documentation? — JB Nizet, Sep 08 '17 at 09:54
I think the problem is a pretty fundamental one when it comes to dynamically repeating elements. There are countless examples and documentation sources out there as mentioned by @JBNizet — Daniel Park, Sep 08 '17 at 10:17
I am not asking how to use *ngFor , I am asking that how to create a dynamic table with *ngFor. That is Creating a Table with unknown column in JSON @JB — Vignesh Mohanraj, Sep 08 '17 at 10:42
The exact same way it's done in the answer you linked to, except you would use ngFor instead of ng-repeat. — JB Nizet, Sep 08 '17 at 11:17
@JBNizet I tried it on the same way but it not worked in the Angular 4 cli. — Vignesh Mohanraj, Sep 08 '17 at 11:38
Then your question should be: *Here's the code of the component: . Here is the code of the template: . I expect this to be displayed: but instead I have this *. It should not be *how to create the dynamic columns and dynamic row table using the ngFor* — JB Nizet, Sep 08 '17 at 11:42
@JBNizet ok dude. I am sorry about the question format. This was my first question in stack overflow so that's why.? If u can solve this problem pls help me. — Vignesh Mohanraj, Sep 08 '17 at 11:45
How about you editing your question to make it look like I suggested, first? — JB Nizet, Sep 08 '17 at 11:46
@JBNizet look I am not here to editing or present a question like beautiful. I need to solve my issue so that's what I am asking here. If you can means you answer other wise keep quit. — Vignesh Mohanraj, Sep 08 '17 at 12:08

Wesley Coetzee · Answer 1 · 2017-09-08T11:11:55.517

0

You would need to have nested ngFor statements, you would also need to set up your data object to make sure it's easy to work with, but this is how you would achieve this

<table *ngIf="columns">
    <thead> 
        <tr>
            <th *ngFor="let column of columns">{{column.header}}</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let column of columns">
            <td *ngFor="let row of column.rows">
                {{row.whatever}}
            </td>
        </tr>
    </tbody>
</table>

edited Sep 08 '17 at 11:11

answered Sep 08 '17 at 10:48

Wesley Coetzee

4,768
3
27
45

what I want to do in the {{ expression }}. like {{ columns }} like that. – Vignesh Mohanraj Sep 08 '17 at 11:04
I updated my answer, is that what you're looking for? – Wesley Coetzee Sep 08 '17 at 11:12
Dude actually I tried your code but it doesn't work for me. will u please post your code in Codepen or something like that and share the link to me. – Vignesh Mohanraj Sep 08 '17 at 11:32

score 0 · Accepted Answer · answered Sep 14 '17 at 07:51

OK, let me conclude this discussion. I have solved my problem by doing this in my controller. Here is my code: `StudentsDetails = [];

columns: string[] = [];

  constructor(private newService: StudentsService) { }

  ngOnInit() {
    this.newService.fetchData()
    .subscribe(responseStudentsDetails => {
      this.StudentsDetails = responseStudentsDetails;
      this.columns = Object.keys(this.StudentsDetails[0]);
    })
  };

Since StudentsDetails is my JSON array. I extract the keys from the StudentsDetails[0]. Then, I added the previous Wesley's code in my html file.

<table class="table table-bordered table-striped table-sm">
            <thead>
              <tr>
                <th *ngFor="let column of columns | filter : filter">{{column}}
                </th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let row of StudentsDetails | filter : filter | paginate: { itemsPerPage: items, currentPage: Page }">
                <td *ngFor="let column of columns | filter : filter">
                  {{row[column]}}
                </td>
              </tr>
            </tbody>
          </table>
          <div class="row">
            <div class="col-sm-4">
              <div class="row">
                <div class="col-sm-3">
                  <select class="form-control form-control-sm" id="page" [(ngModel)]="items">
                    <option>5</option>
                    <option>10</option>
                    <option>25</option>
                  </select>
                </div>
                <div class="col-sm-3">
                  <input type="text" [(ngModel)]="Page" class="form-control form-control-sm" id="page-no" placeholder="Page">
                </div>
              </div>
            </div>
            <div class="col-sm-8">
              <nav>
                <ul class="pagination">
                  <li class="page-item">
                    <pagination-controls (pageChange)="Page = $event"></pagination-controls>
                  </li>
                </ul>
              </nav>
            </div>
          </div>
          <!--/.row-->

` Hence my issue is Solved.

How to create Angular Cli 4 dynamic table by *ngFor.?

2 Answers2