What is the difference between [ngFor] and [ngForOf] in angular2?
AngularTypescriptNgforAngular Problem Overview
As per my understanding, Both are doing the same functions. But,
-
ngForwould be works like as collections?. -
ngForOfwould be works like as generics?.
>Is my understanding is correct? or
Could you please share more difference's(details) about ngFor and ngForOf?
Angular Solutions
Solution 1 - Angular
ngFor and ngForOf are not two distinct things - they are actually the selectors of the NgForOf directive.
If you examine the source, you'll see that the NgForOf directive has as its selector: [ngFor][ngForOf] , meaning that both attributes need to be present on an element for the directive to 'activate' so to speak.
When you use *ngFor, the Angular compiler de-sugars that syntax into its cannonical form which has both attributes on the element.
So,
<div *ngFor="let item of items"></div>
desugars to:
<template [ngFor]="let item of items">
<div></div>
</template>
This first de-sugaring is due to the '*'. The next de-sugaring is because of the micro syntax: "let item of items". The Angular compiler de-sugars that to:
<template ngFor let-item="$implicit" [ngForOf]="items">
<div>...</div>
</template>
(where you can think of $implicit as an internal variable that the directive uses to refer to the current item in the iteration).
In its canonical form, the ngFor attribute is just a marker, while the ngForOf attribute is actually an input to the directive that points to the the list of things you want to iterate over.
You can check out the Angular microsyntax guide to learn more.
Solution 2 - Angular
ngFor is a structural directive of Angular which replaces the ng-repeat attribute of AngularJS
You can use ngFor as a shorthand
<li *ngFor="let item of items">{{item.name}}</li>
or as the longhand version
<template ngFor let-item="$implicit" [ngForOf]="items">
{{item.name}}
</template>
Solution 3 - Angular
In my opinion what I got from the angular document,
[ngFor]is nottype safe[NgForOf]istype safe
Because both class details are little different
-
ngForClass type isanytype -
But
ngForOfclass type is genericngForOf : NgIterable<T>
ngForOf looks like generics which I have already mentioned in my question.
Solution 4 - Angular
NgFor can iterate an array but in ngContainer, ngContent we cannot iterate ngFor directly so For iterating we can use [ngForOf] . Here i is variable, ratings is an array.
Ex.
<ng-template ngFor let-i [ngForOf]="ratings">
<option *ngIf="i<=22" [ngValue]="i">{{i}}:00 Hrs.</option>
</ng-template>
At this example, I want to apply a ngFor and ngIf simultaneously, so i used it.
The other view is that at a normal if we apply ngFor then at rendering it converts it into
<template ngFor let-i [ngForOf]="ratings">
<HTML Element>...</HTML Element>
</template>
Solution 5 - Angular
Explicit version
(<template ngFor ...>)allows to apply the directive to multiple elements at once
Implicit version
- only wraps the element where it is applied