Is it possible to style the same component different in Angular 2?

Question

I have a generic component I want to re-use throughout my app. The problem is that I want to style it differently for various parts of the site. Is this possible?

I'm guessing there's a way to pass in a path for the styleUrl, but that seems really messy and i'm hoping there's a better alternative.

I also tried this but it didn't work: When specifying the component, add in the class, something like this

<generic-component class="customStyle1"></generic-component>

and then added styling based on customStyle1 into generic-component's stylesheet, but it didn't seem to pick up on the style.

Answer 1

You may use :host-context in the style to theme your component based upon some class applied where it is being used.

Read more about it here!!

test.css

:host-context(.theme-green) h3 {
   background-color: green;
}

:host-context(.theme-red) h3 {
   background-color: red;
}

app.component

import { Component }  from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <h3 class="title">Basic Angular 2</h3>
    <my-test class="theme-green" ></my-test>
    <my-test class='theme-red' ></my-test>
   `
})
export class AppComponent {
  constructor(){}
}

test.component

@Component({
  selector: 'my-test',
  template: `<h3>Test Component</h3>
  `,
 styleUrls : ['./app/test.css']
})
export class TestComponent {
 constructor(){}
}

Here is the Plunker!!

Hope this helps!!