Angular 2
Hoe ngfor te gebruiken

Invoering

Voorbeeld van een ongeordende lijst

<ul>
  <li *ngFor="let item of items">{{item.name}}</li>
</ul>

Meer complext sjabloon voorbeeld

<div *ngFor="let item of items">
  <p>{{item.name}}</p>
  <p>{{item.price}}</p>
  <p>{{item.description}}</p>
</div>

Voorbeeld van huidige interactie volgen

<div *ngFor="let item of items; let i = index">
  <p>Item number: {{i}}</p>    
</div>

In dit geval neem ik de waarde van index, wat de huidige lus iteratie is.

Geëxporteerd2 Angular2 geëxporteerde waarden

Angular2 biedt verschillende geëxporteerde waarden die kunnen worden gekoppeld aan lokale variabelen. Dit zijn:

• inhoudsopgave
• eerste
• laatste
• zelfs
• vreemd

Behalve index hebben de andere een Boolean waarde. Zoals het vorige voorbeeld met index, kan het elk van deze geëxporteerde waarden gebruiken:

<div *ngFor="let item of items; let firstItem = first; let lastItem = last">
  <p *ngIf="firstItem">I am the first item and I am gonna be showed</p>
  <p *ngIf="firstItem">I am not the first item and I will not show up :(</p>
  <p *ngIf="lastItem">But I'm gonna be showed as I am the last item :)</p>
</div>

* ng Voor met pijp

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'even'
})

export class EvenPipe implements PipeTransform {
    transform(value: string): string {
        if(value && value %2 === 0){
          return value;
        }
    }
}

@Component({
      selector: 'example-component',
      template: '<div>
                      <div *ngFor="let number of numbers | even">
                          {{number}}
                      </div>
                </div>'
})

export class exampleComponent {
    let numbers : List<number> = Array.apply(null, {length: 10}).map(Number.call, Number)
}