0

I try to implement an updateStyle(...)-method inside of an Angular-Component. With this method specific elements with unique id's shall be styled. Following code-snippet leads to:

Property 'variable' does not exist on type 'CSSStyleDeclaration'.

Is it possible to make angular compile anyway, so the variable is filled with a legit value in runtime or do I have to implement the method for every style-declaration, that I am going to use the method on?

updateStyle(id, variable, value){

  var components = document.querySelectorAll("[id]") as NodeListOf<HTMLElement>;

    for(var i = 0; i < components.length; i++) {

      if(components[i].getAttribute("id") == id) {

         components[i].style.variable = value;

}}}
artkoshelev
  • 872
  • 7
  • 22
rainbowrider
  • 7
  • 3
  • Does this answer your question? [changing css style dynamically from component in Angular 5](https://stackoverflow.com/questions/50698285/changing-css-style-dynamically-from-component-in-angular-5) – kvetis Jan 15 '20 at 13:56
  • Unfortunately not, the article is about the other way around. I want to leave it open whether the color, fill, stroke or whatever is going to be adressed by the method. – rainbowrider Jan 15 '20 at 14:02
  • When do you expect to run `updateStyle`? – igg Jan 15 '20 at 14:05
  • For example on particular click events or when variables in a setIntervall-loop hit specific values. – rainbowrider Jan 15 '20 at 14:15

1 Answers1

-1

You can put variable in square brackets like this:

updateStyle(id, variable, value) {

    var components = document.querySelectorAll("[id]") as NodeListOf<HTMLElement>;

    for (var i = 0; i < components.length; i++) {

        if (components[i].getAttribute("id") == id) {

            ***components[i].style[variable] = value;***

        }
    }
}
Prashant
  • 151
  • 1
  • 11
  • This is a bad practice. Angular provides different apis on style manipulation. – kvetis Jan 16 '20 at 14:57
  • Can you please suggest those API's, so that it validate your statement – Prashant May 14 '20 at 15:54
  • Sorry for not providing one at first. See [Docs: Biding types and targets](https://angular.io/guide/template-syntax#binding-types-and-targets). You can use template binding to set style. Unnecessarily manipulating DOM is a bad practice. – kvetis May 19 '20 at 10:37