0

One of a project where I'm handling is having below code.Can you tell me what it does? I know about *ngFor and *ngIf.But what are these [ngForOf]="topicdata" and ngFor let-topic? Can I simplify below code in a better way?

 <ng-template ngFor let-topic [ngForOf]="topicdata">
        <topic *ngIf="topic.num_of_definitions>0" [data]="topic"></topic>
 </ng-template>

I would like to have it as shown below.

<topic *ngFor="let topic of topicdata" [data]="topic" 
*ngIf="topic.num_of_definitions>0"></topic>

But then it shows this error:

[Angular] Can't have multiple template bindings on one element. Use only one attribute named 'template' or prefixed with *

Fredrik Lundin
  • 8,006
  • 1
  • 29
  • 35
Sampath
  • 63,341
  • 64
  • 307
  • 441
  • 3
    Possible duplicate of [What is the difference between \[ngFor\] and \[ngForOf\] in angular2?](https://stackoverflow.com/questions/43388893/what-is-the-difference-between-ngfor-and-ngforof-in-angular2) – Sajeetharan Jun 22 '17 at 09:48
  • also see here https://angular.io/api/common/NgForOf – Shailesh Ladumor Jun 22 '17 at 09:49
  • Also see the [Angular documentation page on structural directives](https://angular.io/guide/structural-directives#inside-ngfor) - all of them compile down to `ng-template` in this way. – Joe Clay Jun 22 '17 at 09:50

2 Answers2

4

The *ngFor directive is something Angular calls microsyntax. Microsyntax essentially gives developers a way of configuring a directive in a more compact and simple way. You can see that something is using the microsyntax for the preceding *.

The code:

<topic *ngFor="let topic of topicdata"> </topic>

Will for example be equal to:

<ng-template ngFor let-topic [ngForOf]="topicdata">
   <topic> ... </topic>
</ng-template>

Like in the example you have in your question.

So in short - you can replace you code with *ngFor="let topic of topicdata" and get the same result.

EDIT - TO FIX: *ngIf on the same line

Angular doesn't allow you to use two or more structural directives on the same element. So as a way of using *ngIfon the same line I recommend looping out an <ng-container> element and put your <topic> inside that one. 

<ng-container *ngFor="let topic of topicdata">
   <topic *ngIf="topic.num_of_definitions > 0"> ... </topic>
<ng-container>

More in on ng-container here

Fredrik Lundin
  • 8,006
  • 1
  • 29
  • 35
  • This is working ``.But thi is not.Why? ` ` – Sampath Jun 22 '17 at 10:07
  • 1
    That's because the `*ngFor` will create the `ng-template` for you behind the scenes - so putting a `*ngFor` on an `ng-template` wouldn't make sense. Go for `` :) – Fredrik Lundin Jun 22 '17 at 10:11
  • I can't do that hence `*ngIf="topic.num_of_definitions>0"`also there.please see update above.So how can I do that? – Sampath Jun 22 '17 at 10:13
0

It's just a different syntax of ngFor. let-topic [ngForOf]="topicdata" creates a topic variables from topicdata array. You can just write it as follows which creates the syntax you used (with ng-template)

<div *ngFor="let topic of topicdata">
    // some template
</div>

You can find more here https://angular.io/guide/structural-directives#inside-ngfor

Bunyamin Coskuner
  • 8,719
  • 1
  • 28
  • 48