How can I change the CSS style sheet dynamically with AngularJS?

Question

How can I change the CSS style sheet dynamically with AngularJS?

Navigation

#1 by (4 votes)
#2 by (1 votes)
#3 by (1 votes)

2

I'm having a problem with customizing a CSS, AngularJS does not allow me to write a snippet of code like this:

<style>
    .btn-n {
        min-height: {{botao.altura}}px;
        min-width: {{botao.largura}}px;
        border-radius: {{botao.cantos}}px;
        font-family: {{botao.fonte}};
        color: {{botao.corFonte}};
        background-color: {{botao.corFundo}};
    }

    .btn-n .btn-texto {
        font-size: {{botao.tamanhoFonte}}px;
    }

    #pagina-campanha .pagina-texto-inicial {
        font-family: {{pagina.textoInicialFonte}};
        font-size: {{pagina.textoInicialTamanhoFonte}}px;
        color: {{pagina.textoInicialCorFonte}};
    }

    #pagina-campanha .pagina-texto-link {
        font-family: {{pagina.textoLinkFonte}};
        font-size: {{pagina.textoLinkTamanhoFonte}}px;
        color: {{pagina.textoLinkCorFonte}};
    }

    #pagina-campanha .pagina-texto-final {
        font-family: {{pagina.textoFinalFonte}};
        font-size: {{pagina.textoFinalTamanhoFonte}}px;
        color: {{pagina.textoFinalCorFonte}};
    }

    #pagina-campanha .pagina-texto-informativo {
        font-family: {{pagina.textoInformativoFonte}};
        font-size: {{pagina.textoInformativoTamanhoFonte}}px;
        color: {{pagina.textoInformativoCorFonte}};
    }

    #pagina-campanha .btn-pagina {
        font-family: {{pagina.botoesFonte}};
        font-size: {{pagina.botoesTamanhoFonte}}px;
        background-color: {{pagina.botoesCorFundo}};
        border-color: {{pagina.botoesCorFundo}};
    }
</style>

But in my application I need to apply those customizations as the user updates them on a form. It is very quiet to do with ng-style when you have three or four properties, but then it becomes a mess. Any suggestions?

angularjs css

asked by anonymous 16.11.2016 / 13:15

3 answers

1

Look, you can put watchers, for example, to check if the model this input is true or false, for example, and depending on the value you can pass an ng-class with the css class you want to apply. >

For example:

<div ng-class="meuModel ? 'btn btn-lg' : 'btn btn-sm'"></div>

Just to explain it better, I'm making a ternary expression, where my model is true, I'll pass the value 'btn-btn-lg', if it's false, I'll pass the 'btn-sm' value.

I hope I have helped.

21.11.2016 / 20:49

1

TIP 1:

You can use controller directly in your HTML and only change href of your link . Here is an example Plunker .

The code would look like this:

index.html :

<!doctype html>
<html ng-app="appExemploCSS" ng-controller='EstiloController as estilo' >
  <head >
    <meta charset="utf-8">
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="{{estilo.href}}">

    <script src="http://code.angularjs.org/1.3.6/angular.js"></script><scriptsrc="app.js"></script>
  </head>
  <body>
    <label>Este é o label de exemplo</label>
    <br>
    <br>
    <button ng-click="estilo.trocarEstilo(0)">Verde</button>
    <button ng-click="estilo.trocarEstilo(1)">Vermelho</button>
  </body>
</html>

app.js :

(function() {
  'use strict';

  angular
    .module('appExemploCSS', []);

  angular
    .module('appExemploCSS')
    .controller('EstiloController', EstiloController);

  EstiloController.$inject = [];

  function EstiloController() {
    var estilo = this;

    estilo.trocarEstilo = trocarEstilo;

    iniciar();

    function iniciar() {
      trocarEstilo(0);
    }

    function trocarEstilo(sequencia) {
      if (sequencia === 0) {
        estilo.href = 'estilo0.css';
      } else {
        estilo.href = 'estilo1.css';
      }
    }
  }
})();

style0.css :

label {
  font-weight: bold;
  color: green;
}

button {
  color: green;
}

style1.css :

label {
  font-weight: bold;
  color: red;
}

button {
  color: red;
}

SUGGESTION 2:

You can place a class in the uppermost layer of your HTML and control it by changing the attributes within that of the desired element as follows:

(function() {
  'use strict';

  angular
    .module('appExemploCSS', []);

  angular
    .module('appExemploCSS')
    .controller('EstiloController', EstiloController);

  EstiloController.$inject = [];

  function EstiloController() {
    var estilo = this;

    estilo.trocarEstilo = trocarEstilo;

    iniciar();

    function iniciar() {
      trocarEstilo(0);
    }

    function trocarEstilo(sequencia) {
      if (sequencia === 0) {
        estilo.classePrincipal = 'estilo-0';
      } else {
        estilo.classePrincipal = 'estilo-1';
      }
    }
  }
})();

/* Tudo que não utilizar as classes
 * que podem ser trocadas será padrão para
 * todos os elementos do seletor 
 */
label.normal {
  font-weight: bold;
  color: blue;
}

/* Tudo abaixo da classe de controle
 * pode ser alterado conforme a necessidade
 */

/* estilo-0 */
div.estilo-0 label.normal {
  color: green;
}

div.estilo-0 button {
  color: green;
}

/* estilo-1 */
div.estilo-1 label.normal {
  color: red;
}

div.estilo-1 button {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><divng-app="appExemploCSS" ng-controller="EstiloController as estilo">
  <!-- Esta é a div que controlará os estilos -->
  <div ng-class="estilo.classePrincipal">
    <label class="normal">Este é o label de exemplo</label>
    <br>
    <br>
    <button ng-click="estilo.trocarEstilo(0)">Verde</button>
    <button ng-click="estilo.trocarEstilo(1)">Vermelho</button>
  </div>
</div>

NOTE:

For both methods, if you need to send data between controllers of the application use this other answer that teaches you to use services for this purpose: Angularjs - modal inserts template with radiobutton options .

21.11.2016 / 21:41

event with jquery Field calculated with EF

score 4 · Accepted Answer

This is not only possible with the client implementation, since the Angle application is initialized after the style sheets are rendered and made available for consumption by the DOM.

You can try integrating with a server-side implementation, such as angularjs-server , which in theory would allow to implement something like this.