Angular 2+ ngStyle binding with css object having duplicate property

Question

I am using ngStyle property binding with my HTML element to bind dynamic style in my Angular component like below:

example.component.ts

.spinnerStyle = {
            'background': this.color,
            'background': `-moz-linear-gradient(left, ${this.color} 10%, rgba(255,128,0, 0) 42%)`,
            'background': `-webkit-linear-gradient(left, ${this.color} 10%, rgba(255,128,0, 0) 42%)`,
            'background': `-o-linear-gradient(left, ${this.color} 10%, rgba(255,128,0, 0) 42%)`,
            'background': `-ms-linear-gradient(left, ${this.color} 10%, rgba(255,128,0, 0) 42%)`,
            'background': `linear-gradient(to right, ${this.color} 10%, rgba(255,128,0, 0) 42%)`
        }

example.component.html

<div class="loader" [ngStyle]="spinnerStyle">Loading...</div>

As we can see my typescript file is having an object representing my CSS style. It is a valid CSS, but an invalid typescript object as it is having duplicate identifiers. My compilation is failing due to this. What should be the alternate approach?

Rahul Bhooteshwar · Accepted Answer · 2018-02-21 01:10:14Z

1

Ok, I did a workaround for my style object by first creating it as string literal and then converted it to JSON object:

this.spinnerStyle = JSON.parse(`{ "background": "${this.color},background: -moz-linear-gradient(left, ${this.color} 10%, rgba(255,128,0, 0) 42%)",
            "background": "-webkit-linear-gradient(left, ${this.color} 10%, rgba(255,128,0, 0) 42%)",
            "background": "-o-linear-gradient(left, ${this.color} 10%, rgba(255,128,0, 0) 42%)",
            "background": "-ms-linear-gradient(left, ${this.color} 10%, rgba(255,128,0, 0) 42%)",
            "background": "linear-gradient(to right, ${this.color} 10%, rgba(255,128,0, 0) 42%)"
        }`);

It worked like a charm...

answered Feb 21, 2018 at 1:10

Rahul Bhooteshwar

1,9851 gold badge19 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Rahul Bhooteshwar Over a year ago

Ok, I did a workaround for my style object by first creating it as string literal and then converted it to JSON object, but final json object will only keep the last property!!

Ajmal Sha Over a year ago

question and answer are posted by you in same time. then why should you post this?

Eliseo Over a year ago

You can use ngClass. You put your css in your component.css, and use [ngClass]="{'spinnerStyle':condicion}" (when condition it's true, the class is applied)

Rahul Bhooteshwar Over a year ago

@Ajmalsha Aftre posting the question I got it working by doing the workaround within minutes so shared the answer. But still it is not the solution as json object will ultimately keep the last key-value pair. But in CSS all values preserves.

Rahul Bhooteshwar Over a year ago

@Eliseo My styles are very dynamic, and if I will use class it will be according to applied class. I will get these colors as input property.

|

Collectives™ on Stack Overflow

Angular 2+ ngStyle binding with css object having duplicate property

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related