angular2: how to manually add css files by condition to index.html?

Question

The below code is that define for style.

Answer 1

To dynamically load or change your CSS, you can do the following:

1. In index.html:

   You will have a stylesheet link as follows:

   <link id="theme" href="assets/light.css" rel="stylesheet" >

   Note that there is "id" for the link element.

2. In your component you will have as follows:

   Import the DOCUMENT from platform-browser

   import { DOCUMENT } from "@angular/platform-browser";

   then, in your action or on init you will change your css accordingly:

   this.document.getElementById('theme').setAttribute('href','assets/dark.css');

By default, you will load one CSS file.. lets say desktop.css. In your application's root component, you can look for the device or cookie or setup some conditions to change from desktop.css to mobile.css. Like you said, you will NOT use angular-cli.json to load your CSS.