How to change app wide css in Angular 2?

Question

In my application I have different CSS file like fire.css, lake.css each giving different look to complete application.

Currently, I implemented with only 1 file main.css and added this file to
index.html

<link rel="stylesheet" href="resources/styles/main.css">  
<link rel="stylesheet" href="resources/styles/themes.css">
<link rel="stylesheet" href="resources/styles/common.css">
<link rel="stylesheet" href="resources/styles/plugins.css">

Now I wanted to change this dynamically as user select from the drop-down list.

My Idea: Copy all css files to app folder and add themes there.
Folder structure is

I added css to styleUrls in app.components.ts App component now is

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

@Component({

    selector: 'workshop-app',    
    template: `
        <body>
           <router-outlet></router-outlet>
       </body>
    `,
    directives : [ ROUTER_DIRECTIVES ],
    styleUrls : ['app/lake.css']
})
export class AppComponent { }

Contents from Lake.css file is added to style tag under but not making changes in the app.

stackoverflow.com/a/36566111/2703334 maybe this would be helpful. — Ismail Gül
– Ismail Gül, Commented Aug 5, 2016 at 20:21

Hiep Tran · Accepted Answer · 2016-09-14 10:20:26Z

6

add this to the app.component.html

<head>
<link id="theme" rel='stylesheet' href='demo.css'>    
</head>

add this to app.component.ts

import { Component, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/platform-browser';    
constructor (@Inject(DOCUMENT) private document) { }
ngOnInit() {
  this.document.getElementById('theme').setAttribute('href', 'demo2.css');
}

answered Sep 14, 2016 at 10:20

Hiep Tran

4,1231 gold badge26 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sandeep Chikhale Over a year ago

Good answer !!! Project is submitted without this feature I will try it in spare time.

Hiep Tran Over a year ago

happy to help you, wish you luck

sevnur tatar · Accepted Answer · 2019-12-13 15:29:33Z

-1

Use fileReplacements in Angular.json file:

"configurations": {
  "yourproject": { ... },
  "staging": {
    "fileReplacements": [
      {
        "replace": "src/styles.css",
        "with": "src/new-styles.css"
      }
    ]
  }
}

You can check the usage better here: https://angular.io/guide/build

answered Dec 13, 2019 at 15:29

sevnur tatar

1

1 Comment

uajov6 Over a year ago

he is asking to change styles dinamically when the user inputs some actions, not in build time

Collectives™ on Stack Overflow

How to change app wide css in Angular 2?

2 Answers 2

2 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Linked

Related