0

I am working on an Angular 5 project and I have a component which has a chart in it. I want to theme the chart. For this I have created 2 scss files and have added them to the Style URLs of the component. But the way, I want to theme is by switching stylesheets runtime. Is it possible to export the 2 scss files as 2 css stylesheets so that I can hot load/swap them?

Cœur
  • 37,241
  • 25
  • 195
  • 267
Sayak Mukhopadhyay
  • 1,332
  • 2
  • 19
  • 34
  • What do you mean "I can hot load/swap them"? – Mohammad Daliri Mar 03 '18 at 14:35
  • I am injecting a Document service in my component to add styles like this `this.linkRef = this.document.createElement('link'); this.linkRef.rel = 'stylesheet'; this.linkRef.href = this.themeService.getTheme().href; this.document.querySelector('head').appendChild(this.linkRef);` – Sayak Mukhopadhyay Mar 03 '18 at 15:20
  • Is this what you want? https://stackoverflow.com/questions/42370854/is-it-possible-to-build-separate-css-file-with-angular-cli. – wannadream Mar 03 '18 at 17:44
  • ah..not quite. I have the --extract-css flag already enabled in production. But the issue is all the scss in the project is bundled in one css. Is it possible to have build a css file seperately? – Sayak Mukhopadhyay Mar 03 '18 at 17:49

1 Answers1

0

if you want to switch css or scss at runtime you can use javascript document like this

import { Component, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/platform-browser';
@Component({
  selector: 'app-',
  template: "<head><link id="theme" rel="stylesheet" href="red.css"></head>"

})
export class AppComponent implements OnInit {

  constructor (@Inject(DOCUMENT) private document) { }

    ngOnInit() {
      this.document.getElementById('theme').setAttribute('href', 'blue.css');
    }

}

or 

<link rel="stylesheet" href="/theme/css/vendor-rtl.min.css" *ngIf="(locale$ | async)?.isRtl else ltrVendor">
<link rel="stylesheet" href="/theme/css/common-rtl.min.css" *ngIf="(locale$ | async)?.isRtl else ltrCommon">
<link rel="stylesheet" href="/theme/css/application-rtl.min.css" *ngIf="(locale$ | async)?.isRtl else ltrApplication">

<ng-template #ltrVendor>
  <link rel="stylesheet" href="/theme/css/vendor.min.css">
</ng-template>
<ng-template #ltrCommon>
  <link rel="stylesheet" href="/theme/css/common.min.css">
</ng-template>
<ng-template #ltrApplication>
  <link rel="stylesheet" href="/theme/css/application.min.css">
</ng-template>

<router-outlet></router-outlet>
Mohammad Daliri
  • 1,370
  • 6
  • 20
  • 43
  • This is similar to how I am handling themes for the rest of my app. But now I have to generate 2 css files for 2 themes from 2 scss files. If I attach the 2 scss files in my component.ts, then they are bundled into the single css file. – Sayak Mukhopadhyay Mar 03 '18 at 20:05