Create dynamic CSS style from string with Angular items

Question

When using dynamic class with property "Style". Including for example item.Style="color: red"

it is working fine. But Visual Studio code throws error } expectedcss(css-rcurlyexpected) or similar. Result is correct but Designer does not work:

The label-result is 'red' in my case but how to avoid the syntax errors?

Error: ERROR Error: Cannot find a differ supporting object 'color: #DFFDD00;'

Answer 1

ngStyle needs key + value as object. In that case a dictionary is needed. Try my style string to dictionary parser.

You can use it like default css and use all known basic CSS- Syntax.

Example for item.Style

background-color:blue;font-size: 22px;color:red;

Angular

<div [ngStyle]="setStyle(item.Style)">Hello World</div>

TypeScript

private setStyle(value: string): unknown {
    console.log(value);
    if (value == "") return null;
    //Example: value = "background-color:blue";
    var properties = value.split(";");
    var keyValuePairs = {};
    properties.forEach(o => {
      var key = String(o.split(":")[0]).trim();
      var value = String(o.split(":")[1]).trim();
      if (key.length > 0) {
        keyValuePairs[key] = value;
      }
    })
    console.log("keyValuePairs: " + JSON.stringify(keyValuePairs));
    return keyValuePairs;
  }

Result