Шаблон и стили компонента

Подключение шаблона

Рассмотрим файл app\servers\servers.component.ts, сейчас шаблон подключен как внешний файл:

@Component({
selector: 'app-servers',
templateUrl: './servers.component.html',
styleUrls: ['./servers.component.css']

Шаблон не обязательно должен быть внешним файлом:

@Component({
selector: 'app-servers',
template: '<app-server></app-server><app-server></app-server>'
styleUrls: ['./servers.component.css']

Для многострочного варианта нужно заменить символ кавычек на с ' на ':

@Component({
selector: 'app-servers',
template: `
<app-server></app-server>
<app-server></app-server>`
,
styleUrls: ['./servers.component.css']

Работа со стилями компонента

Для работы с html удобно использовать emmit.

Внесем изменения в app.component.html:

<div class="container">
<div class="row">
<div class="col-xs-12">
<h3>I'am in the AppComponent!</h3>
<hr>
<app-servers></app-servers>
</div>
</div>
</div>

В Файлах *.component.ts стили подключаются либо как массив внешних файлов:

styleUrls: ['./app.component.css']

Либо как массив строк:

style: [`
h3 {
color: blue;
}
`
]
Источник – курс «Angular 5 the complete guide», Maximilian Schwarzmüller
Редактировать на GitHub