Работа с 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.