Reaktive løkker i Angular

Reaktivitet vil også fungere i en ngFor-løkke. Det betyder, at ændringer i arrayet umiddelbart vil blive vist på skærmen.

Lad os prøve det i praksis. Antag, at vi har følgende array:

app/app.component.tsexport class AppComponent {
  public arr: string[] = ['a', 'b', 'c', 'd'];
}

Lad os udskrive vores array i en løkke som en liste:

app/app.component.html<ul>
  <li *ngFor="let elem of arr">
    {{ elem }}
  </li>
</ul>

Lav en knap, der, når der klikkes på den, vil kalde en metode i klassen:

app/app.component.html<button (click)="add()">
  add
</button>

I denne metode vil vi ændre vores array på en eller anden måde, for eksempel ved at tilføje et nyt element til det:

app/app.component.tsexport class AppComponent {
  public text: string = '';
  
  public add(): void {
    this.arr.push('!');
  }
}

Hvis du nu kører koden og klikker på knappen, vil et nyt element straks blive tilføjet til listen.