Применить класс CSS к тегу компонента

Question

У меня есть угловой компонент (упрощенная версия):

export class HeaderMainComponent { }

С HTML:

<header>

  <nav>
    <li>Link 1</li>
    <li>Link 2</li>
  </nav>

</header>

И я использую его следующим образом:

<header-main class="dark"></header-main>

Как применить dark класс css header-main к тегу заголовка?

<header class="dark">

Возможно ли это без использования переменной в компоненте?

Answer 1

<header-main [classes]="'dark other-class'"></header-main>

В header-main.ts:

@Input('classes') classes: string;

В header-main.html:

<header class="{{classes}}"></header>