Директива 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"
Формы. Реактивный подход.
Формы. Шаблонный подход.
Формы в Angular
Subject
Observable. Subscribe и Unsubscribe
Route. Обновление шаблона
Route Resolving
Route передача статичных данных
Route. Контроль навигации с помощью сервиса
Route. Защита роутера
Route. Вынос настроек роутера
Route. Переключения и параметры
JavaScript операторы
Сервисы
Структурные директивы
Binding свойств директив
HostListener и HostBinding
Директива атрибута
Навигация. Передача данных событиями
События и жизненный цикл
ng-content
Инкапсуляция стилей и ссылки
Связывание свойств и событий
Компонент и модель
Директива ngFor
Angular CSS и Style
Динамические шаблоны в Angular
События
Компонент и данные
Шаблон и стили компонента
Создание компонентов в Angular
TypeScript, Bootstrap, Main.ts
Установка и первый запуск Angular
Возможно, вам будет интересно
HostListener и HostBinding
Использование декораторов HostListener и HostBinding для реагирования на события и работы со стилями в Angular
Route. Защита роутера
Использование интерфейсов CanActivate и CanActivateChild для принятия решения об активации роутера
Навигация. Передача данных событиями
Навигация в Angular на основе событий. Передача данных между вложенными компонентами с помощью событий в Angular
Route. Вынос настроек роутера
Пример переноса роутинговой конфигурации Angular5 в отдельный файл
