Dynamically change CSS in the head using angularjs

Question

I have some template themes. and based on those themes, when I select any themes I want to change CSS file in the head, which has also the same name as the theme. I want to do it angular way.

Here are designList and update design function.->

$scope.designList = ['136', '140', '150', '139', '137', '086', '088', '104', '008', '106', '002'];
$scope.updateDesign = function (design) {
            $scope.websiteContent.globalPage.settings.template = design;
            angular.element("link#designID").attr("href", $scope.templateBasePath + "design/" + design + "/css/" + design + ".css");
};

Here is my design html->

<div>
    <h2 class="helvetica designSelect">Select Design</h2>
    <div id="selectThumbs" class="paging">
        <a href="#" class="design{{design}}" ng-repeat="design in designList">
            <img class="designthumb" ng-src="{{trustSrc(templateBasePath + 'design/thumbs/' + design + '.jpg')}}" ng-click="updateDesign(design)">
        </a>
    </div>
</div>

In index.html->

<link href="app/webapp/templates/design/136/css/136.css" rel="stylesheet" id="designID">

right now it's built using jquery but not working though. But I donot want to keep this. I want to use if there is any way using angular. Please help

E. Abrakov · Accepted Answer · 2016-06-17 14:18:57Z

2

You can use https://github.com/GabrielDelepine/angular-css-injector for this.

angular.module('myApp', ['angular.css.injector'])
.controller('myCtrl', ['cssInjector', '$scope', function(cssInjector, $scope) {
  cssInjector.add("style.css");

  $scope.changeCss = function () {
    cssInjector.removeAll();
    cssInjector.add("style1.css");
  }
}])

plnkr: http://plnkr.co/edit/2nNzQD7zKGCBSAltrrV4?p=preview

edited Jun 17, 2016 at 14:18

answered Jun 17, 2016 at 8:36

E. Abrakov

4632 silver badges6 bronze badges

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

10 Comments

Mislam Over a year ago

is there a bower package of this injector?

Mislam Over a year ago

It didnot work. I followed readme.md but I saw nothing was added in head. cssInjector.add($scope.templateBasePath + "design/" + design + "/css/" + design + ".css");

E. Abrakov Over a year ago

i modified answer with a plnkr

Mislam Over a year ago

Thank you for helping. Actually I need something that will change template css file reference in head. When a new theme is selected, css file for that theme (theme name and css file name are same) will be added in place of previous file.

E. Abrakov Over a year ago

So you can use cssInjector.removeAll(); to remove added css files and then add new

|

Collectives™ on Stack Overflow

Dynamically change CSS in the head using angularjs

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related