How to make fallback values in a NgStyle object

Question

In the html I can use ngStyle to write:

<some-element [ngStyle]="objExp">...</some-element>

Where objExp returns

    return {
        "background": "red"
    };

This works, and turns the background of the element to red.

There are times when I want a fallback values. For example, if I was dealing with gradients I would need -webkit-linear-gradient, -o-linear-gradient then linear-gradient. I can't add multiple values with the same key to a javascript object.

I guessed at

return { "background": ["red", "blue"] }

but that doesn't seem to work. I've also tried { "background: "red, blue" }

I don't want to use the <some-element [ngStyle]="{'font-style': styleExp}">...</some-element> because that loads complexity repetitively into my html. I can't use [style]="expresionThatGivesAString" because it breaks in Safari.

"red" and "blue" are set at runtime, which is why I'm binding them straight to the element. So putting them in classes isn't an option.

How do I set multiple background values using ngStyle?

Check this: https://stackoverflow.com/questions/37090877/dynamic-classname-inside-ngclass-in-angular-2 — SrAxi, Jul 11 '17 at 14:58
? Red and blue aren't classnames here, I mean #ff0000 and #0000ff — Nathan Cooper, Jul 11 '17 at 15:22
Never mind. [style.cssText] works on safari just fine, I'll just use that and use a string. — Nathan Cooper, Jul 12 '17 at 08:09

score 0 · Answer 1 · answered Jul 11 '17 at 16:06

For complex rules, use ngClass directive instead. Setup classes in your component styles

component.css

.gradient1 {
  background: -webkit-linear-gradient(red, yellow);
  background: -o-linear-gradient(red, yellow);
  background: -moz-linear-gradient(red, yellow);
 }

.gradient2 {
  background: -webkit-linear-gradient(black, white);
  background: -o-linear-gradient(black, white);
  background: -moz-linear-gradient(black, white);
 }

Your component should determine which class is active; the class in turn applies the fallback values as defined in the CSS.

component.ts

// Will determine which class to apply.
getClass(){
  return someCondition ? 'gradient1' : 'gradient2';
}

Then in your template, just apply the class by binding to the function result.

component.html

<some-element [ngClass]="getClass()">...</some-element>

Thanks for your effort, but the colours come at runtime, which means I can't use this. I'll make that more clear in my answer — Nathan Cooper, Jul 12 '17 at 07:33

How to make fallback values in a NgStyle object

1 Answers1