What is Angular [ngForOf] usage

Question

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 *

Answer 1

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

Answer 2

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