Using ngFor loop

1. Initial events list

Since the Event component receives information like the date or title from the App (parent) component, it is now the App component which will be responsible for storing and managing the list of events. Let's add an initial list of the events into app.component.ts

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"]
})
export class AppComponent {
  events: Array<any> = [
    {time: '08:00', subject: 'Breakfast with Simon', location: 'Lounge Caffe', description: 'Discuss Q3 targets'},
    {time: '08:30', subject: 'Daily Standup Meeting (recurring)', location: 'Warsaw Spire Office'},
    {time: '09:00', subject: 'Call with HRs'},
    {time: '12:00', subject: 'Lunch with Timmoty', location: 'Canteen', description: 'Project evalutation ile declaring a variable and using an if statement is a fine way to conditionally render a component, sometimes you might want to use a'},
  ];
}
  

Now we have our initial data, let's learn how to use for loop to dynamically generate all event from events[] array.

2. *ngFor

Angular allows us to use a variety of useful directives. One of the most basic and common is ngFor which is an implementation of a for loop.

ngFor is designed to work with collections. Since we have a collection of events let's see how to use the ngFor directive in our code. Please, update app.component.html with the following code:

      <ul>
        <li *ngFor="let event of events; let i = index">
          {{ i }} {{ event.subject }}
        </li>
      </ul>
  

As you can see, it's very intuitive. We are browsing through an events collection and referring to each single instance as an event. We have also defined our autoincremented index as i.

Of course names can be adjusted to suit our variables and convention i.e.:

        <li *ngFor="let item of items; let counter = index">
  

We can also put more complex structure within our loop (i.e. surrounding div, headings etc.):

<ul>
  <li *ngFor="let event of events; let i = index">
    <div class="someClass">
     <h3>{{ i }} {{ event.subject }} </h3>
    </div>
  </li>
</ul>
  

3. <ng-container>

As you probably noticed, the ngFor directive is used inside the HTML tags like <li>.

This means that given tag will be duplicated as many times as our loop will iterate. Sometimes you may want to use the ngFor loop outside the tag (don't want any element to be repeated).

Although it is impossible to use ngFor directive outside the tag, there is another way. We can use a special Angular tag :

  <ng-container *ngFor="let event of events; let i = index">
     {{ i }} {{ event.subject }} 
  </ng-container>
  

This will not render any wrapping element around our elements.

4. ngFor vs *ngFor

You also may have noticed that we are using an asterisk (*) before the ngFor directive.

It is related to so-called templates within Angular. We will learn more about them in a future lesson. For now just remember that:

• Both ngFor and *ngFor are valid Angular directives
• *ngFor is simplified version of ngFor which allows us to use it directly on elements like <li>

If you are curious what the differences are, have a look at the following code. This:

<ng-container  *ngFor="let item of items; let i = index">
  {{ i }} {{ item }}
</ng-container >

  

is a shorter version of:

<ng-template ngFor let-item="$implicit" [ngForOf]="items" let-i="index">
    {{i}} {{item}}
  </ng-template>
  

Therefore, before we will get to the lesson about Angular templates, keep in mind to rather use asterisk version if you want to avoid issues.

5. Using ngFor to pass events

Now we know how ngFor works, let's use it to pass dynamically list of all events and render them:

<div class="container">
  <div class="row">
    <div class="col-md-9">
      <div *ngFor="let event of events">
        <app-event [value]="event"></app-event>
      </div>
    </div>
    <div class="col-md-3"></div>
  </div>
</div>


  

Note:
We skipped the index (iterator) part on purpose. We don't need to refer to it within our loop, therefore we haven't defined a variable for it.