将CSS类应用于Component标签

Question

I have the angular component (simplified version):

export class HeaderMainComponent { }

With the HTML:

<header>

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

</header>

And I use it as follows:

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

How to apply dark css class of header-main to header tag?

<header class="dark">

Is this possible without using a variable in the component?

Answer 1

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

In header-main.ts:

@Input('classes') classes: string;

In header-main.html:

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