How to change the CSS style sheet dynamically with Angularjs?

Asked

Viewed 3,228 times

2

I’m having a problem with the customization of a CSS, Angularjs does not allow me to write a code snippet as follows:

<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 these customizations as the user updates in a form. It’s very quiet to do with ng-style when you have three or four properties, but then it becomes a mess. Any suggestions?

css angularjs

  • You could instead of changing class attributes, you could change class. It would keep your code simpler and easier to read/edit.

  • Problem is that I have seven fixed classes, with about seven attributes with variable values.

  • Angularjs runs on the client, to use something like this you would need to do on the server (.net, java, etc). Angularjs that you can use is the ngStyle, that way <elemento ng-style="{ 'height': minhaaltura+ '%' }">

3 answers

4


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

You can try to integrate with a server-side implementation such as Angularjs-server, that in theory would allow you to implement something like this.

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 better, then I am making a ternary expression, where if my model is true, I will pass the value 'btn btn-lg', if false, I will pass the value 'btn btn-Sm'.

I hope I’ve helped.

1

SUGGESTION 1:

You can use a controller directly into your HTML and change only the href of your link. Here’s a Plunker exemplifying.

The code would look like below:

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>
    <script src="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';
      }
    }
  }
})();

stilo0.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 highest layer of your HTML and control it by changing the attributes within 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>

<div ng-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>

OBSERVING:

For both methods, if you need to send data between the controllers of the application use this other answer that teaches to use servicesto this end: Angularjs - modal inserts template with radio button options.

Browser other questions tagged css angularjs

You are not signed in. Login or sign up in order to post.