Where to apply the parent theme class when using :host-context(.theme_name) in Angular2?

128
April 27, 2018, at 3:42 PM

I'm building a themed Angular2 app. I have loads of nested components and I would like to change the theme for the whole app by changing one parent class. Let's say one theme is called "theme1". When I apply this to a very parent html-tag, all the nested child components will then switch style by using :host-context, like this:

:host-context(.theme1) .title-toc {
    font-family: "bookmania";
    font-weight: 700;
    font-size: 20pt;
    text-transform: uppercase;
    color: #a5a5a5;
}

However, where to put this class="theme1"? When I put it to <body>, it worked so the code itself works, but I need to change the theme dynamically so it has to be inside some Angular component instead where I can use [ngClass]. For example inside AppComponent. But when I put it inside app.component (for example router-outlet or any other wrapping tag that should wrap my whole app), it didn't work anymore.

Do I have to make it deep with ::ng-deep somehow or what could be wrong?

Answer 1

You can bind to your root component element's class attribute like this:

export class AppComponent implements OnInit {
  @HostBinding('attr.class') mainClass = 'theme1';
  changeTheme(theme) {
    this.mainClass = theme;
  }
}
Rent Charter Buses Company
READ ALSO
Foundation sticky element disregards float classes

Foundation sticky element disregards float classes

I have a little toggle button in the top right of a long form, that toggles whether the form is editable or notIt's sticky with reference to the top and bottom elements of the form

143
Using window.print() or alternative on Android devices

Using window.print() or alternative on Android devices

On Android devices (I have tested Nexus 5, Nexus 10, Galaxy S4 and Galaxy Tab 3), the windowprint() command in JavaScript doesn't do anything

770
Need Help on Page Object Model Implementation mobile application nodejs

Need Help on Page Object Model Implementation mobile application nodejs

I want to need help on page object model implementation in nodejs mobile application

145