Рэактыўныя цыклы ў Angular

Рэактыўнасць таксама будзе працаваць у цыкле ngFor. Гэта значыць, што пры змяненнях масіва, гэтыя змяненні адразу адлюструюцца на экране.

Давайце паспрабуем на практыцы. Хай у нас ёсць наступны масіў:

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

Вывядзем наш масіў у цыкле ў выглядзе спісу:

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

Зробім кнопку, па кліку на якую будзе выклікацца метад класа:

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

У гэтым метадзе як-то зменім наш масіў, напрыклад, дадамо ў яго новы элемент:

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

Цяпер, калі запусціць код і націснуць на кнопку, то адразу пасля націску ў спісе з'явіцца новы элемент.