Skip to main content

Posts

Showing posts with the label ngforof vs ngfor

Angular 5 and 4 NgForOf and ngFor loops with Example

The NgForOf/ NgFor directive instantiates a template once per item from an iterable and the context for each instantiated template inherits from the outer context with the given loop variable set to the current item from the iterable. The Selectors - ü   [ngFor] ü   [ngForOf] Stayed Informed – Angular 5 and Angular 4 Documents NgForOf with HTML Elements - The NgForOf directive is used with HTML elements as following. < h2 > User List - NgForOf and NgFor loops </ h2 > < div >   < ul * ngFor = "let user of users | index as i" >     < li >          {{i}} - {{user}}          </ li >   </ ul > </ div > NgForOf with <ng-template> - The NgForOf directive is used with <ng-template> as following. < h2 > User List - NgForOf and NgFor loops </ h2 > < div > ...

What Is the Difference Between [ngFor] and [ngForOf] in Angular 2?

Angular 2 - ngFor vs. ngForOf 1.      The [ngFor] is not a type safe 2.      The [NgForOf] is a type Safe 3.      The [NgFor] directive instantiates a template once per item from iterate 4.      The [ngFor] and [ngForOf] are actually the selectors of the [NgForOf] directive and it is not two distinct things 5.      The [ngFor] will be works like as collections 6.      The [ngForOf] will be works like as generics Stayed Informed - Angular 2 Q/A Example - ngFor <div * ngFor= "let user of users" let i= index; > {{i}} - {{user.name}} </div> OR <template> <div [ ngFor ]=" let user of users " let i= index; > {{i}} - {{user.name}} </div> </template> Example - ngForOf <div ngFor let-user= "$implicit" [ ngForOf ]=" users " let-i= "index" > {{i}} - {{user.name}} </div> ...