*ngFor on ng-template outputs nothing Angular2

Question

Not sure why my *ngFor loop is printing nothing out. I have the following code in an html file:

<table class="table table-hover">
    <thead>
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Company</th>
            <th>Status</th>
        </tr>
    </thead>
    <tbody>
        <!-- NGFOR ATTEMPTED HERE -- no content printed -->
        <ng-template *ngFor="let xb of tempData">
            <tr data-toggle="collapse" data-target="#demo1" class="accordion-toggle">
                <td>{{ xb.name }}</td>
                <td>{{ xb.email }}</td>
                <td>{{ xb.company }}</td>
                <td>{{ xb.status }}</td>
            </tr>
            <!-- other content -->
        </ng-template>
    </tbody>
</table>

Then, in my simple component I have the following:

import { Component }        from '@angular/core';

@Component({
    selector: 'my-profile-exhibitors',
    templateUrl: './profile-exhibitors.component.html',
    styleUrls: ['./profile-exhibitors.component.scss']
})
export class ProfileExhibitorsComponent {
    public tempData: any = [
        {
            'name': 'name1',
            'email': 'email1@gmail',
            'company': 'company',
            'status': 'Complete'
        },
        {
            'name': 'name2',
            'email': 'email2@gmail',
            'company': 'company',
            'status': 'Incomplete'
        }
    ];
    constructor() {}
}

When I run this code, I get zero output. Even weirder is that when I select the element using debug tools I see this:

Looks like it correctly recognizes my object, but then outputs nothing.

Günter Zöchbauer · Accepted Answer · 2017-04-03T06:31:19.653

154

I think what you want is

<ng-container *ngFor="let xb of tempData">

or

<ng-template ngFor let-xb [ngForOf]="tempData">

edited Apr 03 '17 at 06:31

answered Apr 03 '17 at 06:24

Günter Zöchbauer

623,577
216
2,003
1,567

57

Thanks! And whoever designed the syntax for `ng-template` needs to be burned at the stake – Syntactic Fructose Apr 03 '17 at 06:33
2

Not sure what you're complaining about. It's normal Angular template syntax. They introduced `` to be able to use the more concise and more common `*xxx` syntax on ` – Günter Zöchbauer Apr 03 '17 at 06:36
3

They made a smart decision with ng-container. That syntax is extremely unintuitive. – Syntactic Fructose Apr 03 '17 at 06:38
No, it's not ;-) `ngFor` adds a directive with the selector `ngFor`, `let-xb` makes the context of the template instantiation available within the template `[ngForOf]="tempData"` assigns `tempData` to the `ngFor` directive. That's quite common Angular2 template syntax. You should become comfortable with it. For example if you want to use `ngForTemplate` or `ngTemplateOutlet` or if you build custom structural directives like `*ngIf` and `*ngFor`. – Günter Zöchbauer Apr 03 '17 at 06:43
4

Nice answer, solves my problem. the ng-template syntax makes no sense and is totally inconsistent with anything else in anguaar - let-xb to make a variable called xb? wtf? – speciesUnknown Oct 12 '18 at 11:23
What if I wanted an index? – nullmn Mar 24 '19 at 12:16
How do we access index of ngFor if `` is inside a `
` containing 'ngFor' ? – Sarthak Maheshwari May 28 '20 at 15:26
@SarthakMaheshwari `` should make the index available in `foo` – Günter Zöchbauer May 28 '20 at 15:30
@GünterZöchbauer
ng-template is inside a div having ngFor, I want to access index of ngFor inside ng-template, Your solution did not work though – Sarthak Maheshwari May 28 '20 at 15:40
@SarthakMaheshwari I think that is too complicated to solve in comments. I think it's better to create a new question. I also haven't done anything like this in a long time. – Günter Zöchbauer May 28 '20 at 17:36
how do I skip a particular iteration or dom element with ng-template... e.g. if xb.name === 'mr. cannot be shown'? – Artanis Zeratul Dec 07 '22 at 11:36
You can add `*ngIf="xb.name === 'mr.'"` to the item inside the `*ngFor`. This would be like ` – Günter Zöchbauer Dec 07 '22 at 14:24

SUSEENDHAR LAL · Answer 2 · 2020-08-29T13:49:12.967

8

For getting index as well: <ng-template ngFor let-xb [ngForOf]="tempData" let-index="index">

edited Aug 29 '20 at 13:49

answered Feb 18 '20 at 06:18

SUSEENDHAR LAL

141
2
3

*ngFor on ng-template outputs nothing Angular2

2 Answers2

Linked