python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
Angular 4 vs. Angular 5

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>
  <!--With <ng-template> element -->
  <ng-template ngFor let-user [ngForOf]="users" let-i="index">
      <li>{{i}} - {{user}}</li>
  </ng-template>
</div>

NgForOf with Async Pipe -
<h2>User List - NgForOf and NgFor loops with Async </h2>
<div>
  <ul *ngFor ="let user of users | index as i; async">
    <li>
         {{i}} - {{user}}     
    </li>
  </ul>
</div>

NgForOf with <ng-template> with Async -
<!-- User List - NgForOf and NgFor loops With <ng-template> element and Async -->
<div>
  <ng-template ngFor let-user [ngForOf]="users | async" let-i="index">
      <li>{{i}} - {{user}}</li>
  </ng-template>
</div>

The Result looks like –

The Video example as following –
I hope you are enjoying with this post! Please share with you friends. Thank you!!
ANIL SINGH

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
www.code-sample.com/. Powered by Blogger.
ASK Questions