Anil Singh | Code-sample.com

What Is NgForOf in Angular? Structural directives render a template for-each item in a collection and this directive is placed on an element, which becomes the parent of the cloned templates. The ngForOf directive is generally used in the shorthand form * ngFor . In the below example, the template to be rendered for each iteration is the content of an anchor element containing the directive. The following example shows the shorthand syntax with some options, contained in an <li> element. < li   *ngFor = "let item of items; index as i; trackBy: trackByFn" > ... </ li > The shorthand form expands into a long form that uses the ngForOf selector on an <ng-template> element. The content of the <ng-template> element is the <li> element that held the short-form directive. Here is the expanded version of the short-form example. < ng-template   ngFor   let-item   [ngFo...

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 > ...