Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 829 of the free egghead.io lessons, plus get Angular 2 content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Just one more step!

Check your inbox for an email from us and click link to unlock your lesson.



Loop Through Angular 2 Components with ngFor

1:58 Angular 2 lesson by

This lesson covers Angular 2’s version of looping through data in your templates: *ngFor. It’s conceptually the same as Angular 1’s ng-repeat, but you’ll find the syntax quite different as it aligns with #refs in Angular 2 and JavaScript “for of” loop.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

This lesson covers Angular 2’s version of looping through data in your templates: ng-for. It’s conceptually the same as Angular 1’s ng-repeat, but you’ll find the syntax quite different as it aligns with #refs in Angular 2 and JavaScript “for of” loop.

Avatar
Rolando

Hi John, thanks for this series, unfortunately I haven't been able to pass through this lesson, the following error appears on my consolé.

EXCEPTION: Cannot resolve all parameters for TodoList(?). Make sure they all have valid type or annotations.

Any ideas??

In reply to egghead.io
Avatar
Nils

i dont really understand what the [TodoService] in main.ts gives us ?. We still need to import it in every "module"? that wants to use it. tnx

Avatar
kevin

perhaps you are running into some syntax changes that have occurred in angular2. You may need to import NgFor like this

import {NgFor} from "angular2/common";

The usage has also changed it seems from ng-for to ngFor?

In reply to Rolando
Avatar
Leon

The TodoService just contains the todo array. So 1 module pushes todo's into that Array, and the other module just displays the todos in the array on the page. Yeah it seems to be exactly like Angular 1, where you have to import a service into every Controller where you want to use it.

In reply to Nils
Avatar
Goma Games

in the latest version of angular2, instead of using

<li *ngFor="#todo of todoService.todos">

the new syntax should be

<li *ngFor="let todo of todoService.todos">
Avatar
Bill

I believe this video was changed in the course, because there is no ToDo service currently being worked on. Please remove the non-related discuss posts to this new current video.

We'll start by adding messages to our MailService, and this will just be an array. One message can be, You're now friends with John. Next one can be, John liked your tweet. The last one will be, You'll never believe what John said.

mail.service.ts

@Injectable()
export class MailService {

  messages = [
    `You're now friends with John.`,
    `John liked your tweet.`,
    `You'll never believe what John said.`
  ]

  constructor() { }
}

With these messages in our MailService, I can hop over to my app.component. I'm going to delete everything in this template, and I'll even clear up some of this stuff as well. We don't need that. We don't need that. All we're doing is injecting this mail service.

app.component.ts

@Component({
  selector: 'app-root',
  template: ``
})
export class AppComponent {

  constructor(
    @Inject('mail') private mail
  ){}
}

I'm going to create an unordered list with list elements inside of it. We want to create a list element for each message that we have. To do that we'll add *ngFor. Make sure it's an uppercase F. Then inside of the value here we'll say let message of mail.messages. mail is the mail service. message is the property we created here.

app.component.ts

template: `<div>
<ul>
  <li *ngFor="let message of mail.messages">
    {{message}}
  </li>
</ul>

</div>`

Now this message variable that we're creating for each of these messages can be used inside of the list element like so. I'll just say {{message}} inside of the curly braces, and I'll hit save. You'll see each of these messages show up as a list element inside of this unordered list.

You might be wondering about this asterisk here. That just represents that this list element is considered a template that can be regenerated and reused based on the information passed in. ngFor is a structural directive. It will take this list element, use it as a template, and do something with it. In this case this ngFor directive is saying, "Hey, take all these messages and then create one for each message. Then let us use this message variable inside of it."

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?