Angular для новичков: HTML, Bootstrap и события

Работа с HTML-шаблоном и Bootstrap

Откроем компонент colors и заменим английские названия цветов на русские: белый, черный, серебристый.

В HTML-шаблоне компонента можно использовать стили Bootstrap, так как он был подключен в первом уроке. Например, добавим отступ снизу с помощью класса mb-2 и сверху с помощью mt-2:

<div class="mb-2 mt-2">
  <!-- Содержимое -->
</div>

Создадим заголовок с помощью тега <h1> и выведем название автомобиля, используя свойство name:

<h1>{{ name }}</h1>

Добавим информацию о модели автомобиля, используя свойство model:

<p>Модель: {{ model }}</p>

Результат: <h1>Автомобиль Audi RS 8</h1> <p>Модель: RS 8</p>

Работа со списками и объектами

Создадим блок с классом alert alert-success для отображения характеристик автомобиля:

<div class="alert alert-success">
  Характеристики автомобиля
</div>

Используем немаркированный список (<ul>) для вывода характеристик, используя свойства объекта colors:

<ul>
  <li><strong>Скорость:</strong> {{ speed }} км/ч</li>
  <li><strong>Цвет автомобиля:</strong> {{ colors.color }}</li>
  <li><strong>Цвет салона:</strong> {{ colors.salon }}</li>
  <li><strong>Цвет колес:</strong> {{ colors.wheels }}</li>
</ul>

Вывод массива options напрямую выглядит некрасиво, поэтому воспользуемся циклом *ngFor:

<h3>Доступные опции</h3>
<div class="alert alert-warning">
  <ul>
    <li *ngFor="let opt of options; let i = index">
      {{ opt }} ({{ i + 1 }})
    </li>
  </ul>
</div>

Обработка событий

Добавим заголовок «Выберите автомобиль» и три кнопки для выбора автомобиля (BMW, Audi, Mercedes) с использованием классов Bootstrap:

<h3>Выберите автомобиль</h3>
<button type="button" class="btn btn-danger" (click)="selectCar('bmw')">BMW</button>
<button type="button" class="btn btn-primary" (click)="selectCar('audi')">Audi</button>
<button type="button" class="btn btn-info" (click)="selectCar('mercedes')">Mercedes</button>

В файле car-company.css добавим стиль для кнопок, чтобы избежать их наложения:

.btn {
  margin-right: 10px;
}

В компоненте Angular создадим метод selectCar(car):

selectCar(car: string) {
  switch (car) {
    case 'bmw':
      // Значения для BMW
      break;
    case 'audi':
      // Значения для Audi
      break;
    case 'mercedes':
      // Значения для Mercedes
      break;
  }
}

Заменим значения свойств в зависимости от выбранного автомобиля внутри метода selectCar.

Что будем искать? Например,программа