Angular-da Reaktiv Dovrler

Reaktivlik dovrun icinde de ngFor isleyecek. Bu o demekdir ki, massivde deyisiklikler bas verdikde, bu deyisiklikler derhal ekranda eks olunacaq.

Gelin praktikada sinaq edek. Tutaq ki, bizim asagidaki massivimiz var:

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

Massivimizi dovrun icinde siyahi kimi cixartaq:

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

Klikleyende sinif metodunu cagiran bir duyme edek:

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

Bu metodda massivimizi nece ise deyisdirek, meselen, ona yeni element elave edek:

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

Indi kodu ise saldiqda ve duymeye basdiqda, basdiqdan derhal sonra siyahida yeni bir element peyda olacaq.