Директива ngFor

В файле \app\servers\servers.component.html:

Заменим:

<app-server></app-server>
<app-server></app-server>

На:

<app-server *ngFor="let server of servers"></app-server>

В файле \app\servers\servers.component.ts определим переменную servers:

servers = ['Test1', 'Test2'];
serverName = 'NewServer';

onServerCreate() {
this.servers.push(this.serverName);
this.serverStatus = "Server is ON";
this.serverCreated = true;
}

Теперь, блоки app-server будут генерироваться автоматически, из списка.

Получить номер итерации можно так:

*ngFor="let server of servers; let i = index"
Редактировать на GitHub