http://robertdunaway.github.io

Angular2 code kata list

All code katas lists

003 Angular2 - ngFor

Duration

5 minutes

Brief

Use ngFor to iterate over an object.

For more information

BING/GOOGLE: “Angular2 ngFor”

Read eBook: https://www.ng-book.com/2/

https://angular.io/docs/ts/latest/api/common/NgFor-directive.html

Instructions

Get tutorial folder or the entire katas-angular2 repo.
Open the [before/*.sln] file and execute the kata.
Feel free to execute this kata multiple times because repetition creates motor memory.

Github

• Before (start kata with this)
  
  • https://github.com/robertdunaway/katas-angular2/tree/master/003%20Angular2%20-%20ngFor/before
• After
  
  • https://github.com/robertdunaway/katas-angular2/tree/master/003%20Angular2%20-%20ngFor/after

Kata

Iterate over the Person property and display a list of users.

We already have a basic Angular2 application with a Person class. The Person class constructor populates the persons object that you will iterate over.

Us a ngFor to display a list of persons. This is similar to and the replacement for Angular1’s ngRepeat.

Your components template might end up looking something like this.

@Component({
    selector: 'hello-world',
    template: `
    <div>
        <li *ngFor='#person of persons'>{{person.FirstName}} {{person.LastName}} {{person.Email}}</li>
    </div>
`
})

You might want to experiment with ngFor. Possibly create a dropdown control with the ngFor directive.

Next

Take a few minutes and imagine more examples.