chain conditional css with normal css attribute

Question

I'm using ng-style in angularJs to style an element like the following the first part is conditional style that depends on the value of isEdit if it's true pass empty object if not set color to grey , the second style should be applied regarless of the first part.

the code I used didn't seem to work

ng-style="isEdit? {}: {'color': 'gray'}, leftStyle"

is there a way to chain the 2 styles and make them work at once ?

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

We can achieve that by merging the styles in a method and then calling it in template

<h1 ng-style="isEdit ? {} : getStyles()">
    {{ heading }}
</h1>

var style1 = {
  color: "white",
  "background-color": "coral",
  "font-size": "60px",
  padding: "50px",
};

function _getStyles() {
  return Object.assign({}, style1, {
    border: "3px solid black",
  });
}

Working Demo

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered May 26, 2020 at 20:13

Zain Zafar

9367 silver badges19 bronze badges

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

Collectives™ on Stack Overflow

chain conditional css with normal css attribute

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related