CSS themes in Angular 2

Question

What would be the best way to create CSS theme plugins for an Angular 2 application? And what would be the recommended file structure? I am currently using the one generated by angular-cli.

Answer 1

We have several ways to add styles to a component:

• inline in HTML template
• setting styles or style metadata
• with CSS import

Built-in styles:

@Component({
  templateUrl: 'test.html',
  styles: [`
    .card {
      height: 20px;
      width: 80px;
    }
  `],
})

Use external style sheets:

@Component({
  styleUrls: ['css/mystyle.css'],
  templateUrl: 'test.html',
})

CSS Import:

@import 'hero-details-box.css';

Component styles also have special shadow selectors in the DOM style. for example, a CSS theme class may be used in a document:

:host-context(.theme-light) h2 {
  background-color: #eef;
}

, , HTML CSS :

quest-summary.component.ts
quest-summary.component.html
quest-summary.component.css

, , .

SAS, ANGULAR2 SASS .

styleUrls: ['./sassexample.component.scss']

, :

PrimeNG

Material

NG bootsrap

, .

!!

Answer 2

Angular cli css, sass less, css-. , , less/sass, , angular

:

app.component.html

<div [ngClass]="theme">
   <div class="widget">TEST</div>
</div>

app.component.ts

import { Component, OnInit, ViewEncapsulation } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss'],
    encapsulation: ViewEncapsulation.None // this allows parent styles to influence children
})
export class AppComponent implements OnInit {
    public theme: string;

    constructor() {}

    public ngOnInit(): void {
        this.theme = ... some logic to set theme here ...
    }
}

app.component.scss

.theme1 {
     .widget {
        background-color: red;
     }
}

.theme2 {
     .widget {
        background-color: blue;
     }
}

. google ,