1

My requirement is i need to call a css url from a variable. Actually i dont want to hard code it. As per the logged in user , the name of the css will be downloaded in local storage and from there i want to load it on index.html, how can i make this possible ?

My index.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Wbuilder</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">

  <link rel="stylesheet" href="./assets/files/css/style.css">
  // instead of this i need to call this from a variable

</head>
<body>
  <app-root>Loading...</app-root>
</body>
</html>
Improve this question

3 Answers 3

Reset to default
2

Why not create an Angular component that dynamically generates an in-line <script>tag that includes a dynamically generated @import statement that loads the css. This component will be added to your root component template.

So the template for the dynamic css component may look like this:

<style>
   @import "{{dynamicCssFileLocation}}.css";
</style>

With this dynamic css component's selector in your mainn index.html file it should load this dynamic file from the variable dynamicCssFileLocation

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

3 Comments

can you give me an example for an head start
I am new in angular, i use angular cli. To my understanding when i create a new component using ng g c comp_name its html and ts files are created. How can i create a component for index.html ? Sorry for throwing a noob question
create a new component as you described, follow my instructions, and then include it in your root component (app.component.html typically) as a child component
0

Open your main style.css( This file be under app folder ) file and write top on the code this line:-

style.css

@import "/assets/files/css/style.css";
Improve this answer

3 Comments

Please connect to me on skype: jessica_storm1986 for freelance work if interested
Ok, If are you satisfy with my answer so please check mark my answer.
this is not the relevent answer :)
-1

This may help someone. Instead adding a file, if there are minimal dynamic css you can include it. A dynamic generated CSS at the controller can be bind to the HTML View using ng-bind-html attribute with in the style tag.

Have a look at http://www.codeexpertz.com/blog/angularjs/adding-dynamic-generated-csscascading-style-sheet-angularjs-view-example for Demo and Sample Code

HTML

    <style ng-bind-html="myStyle"></style>
    <span>Enter the background colour value:</span>
    <span><input type = "text" ng-keyup="updateChanges()" ng-model = "bgcolour"></span>
    <br/>
    <div class="codeexpertz">
    </div>

SCRIPT

    app.controller("myCtrl", function($scope) {
    $scope.bgcolour = '11acfd';
    $scope.updateChanges = function(){
        $scope.myStyle= '.codeexpertz { background-color: #' + $scope.bgcolour + '; height: 100px; width: 100px; border: 1px #000 solid}';
    }
    $scope.updateChanges();
Improve this answer

1 Comment

This answer requires angular2+

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.