-4

Here, I want to pass a condition in div that when it contains a certain number display certain color.

The condition is:

      if (num >= -100.0 && num <= -35.0) {
          return '#f1403b';
        } else if (num > -35.0 && num <= 35.0) {
          return '#ffc200';
        } else {
          return '#34A853';
        }

app.component.html
---------------------
 <div  [ngStyle]="{'color': (num >= '-100.0' && num <= '-35.0' ) ? '#f1403b' : ( (num > '-35.0' && num <= '35.0') ? '#ffc200' :'#34A853')
}">
({{num}})
</div>
Manzer Hashmi
  • 73
  • 2
  • 4
  • 12
  • Why do you want to inline it? Just put that logic in the component class and expose it via a `get` accessor. – jonrsharpe Oct 29 '17 at 11:03
  • My requirement is to pass an inline css with above condition. If it is possible, please help. – Manzer Hashmi Oct 29 '17 at 11:06
  • 4
    But **why do you want to write it inline?!** Where does that requirement come from? You're just going to end up with a very complex expression in your template, when it is completely unnecessary - the same functionality can be achieved in other, more readable ways. – jonrsharpe Oct 29 '17 at 11:08
  • Assign the result of the expression to a field and use the field as condition. – Günter Zöchbauer Oct 29 '17 at 11:22
  • I want to pass the expression condition in ngStyle inline. If it is possible. – Manzer Hashmi Oct 29 '17 at 11:24
  • 3
    Please stop just saying the same thing over and over again. **Why?** Why *specifically* do you want to try to jam this all into the template? What have you tried, and what exactly is the problem with it? Why not just use a field, as Günter and I have suggested? – jonrsharpe Oct 29 '17 at 11:50
  • Please stop just asking the same thing over and over again. I have mentioned the scenario and want the answer in the same context as asked, If answer is possible . I know, the asked solution is not the best solution to deal with but I dont need the best. – Manzer Hashmi Oct 29 '17 at 12:00
  • 2
    @ManzerHashmi it's not that you don't want the best. It's the you're specifically asking experts here how to do things in a horrible, shitty way, and are refusing to give a rational reason why. People answering here take pride in what they do, and won't advise you to do things in such a horrible way. So you can just assume it's not possible, and move on to solve a real problem. – JB Nizet Oct 29 '17 at 12:11

1 Answers1

7

Hello You can define a function in controller which returns the value of your needs. You can use that in view file. Below I am giving a plunker link . Just go through it. Hope it will work for you. Let me know if you have any doubts on this. https://plnkr.co/edit/lW1rP9VyCeqpS5QhGjJA?p=preview

Codes:

<div [ngStyle]="{'color': colorGreen(), 'font-size': size + 'px', 'font-weight': 'bold'}">

Angular 2 Ng Style Example

You can check your if() condition here and return the color.

colorGreen = function(){
return 'green';
}

Thanks

biswajit-rout
  • 377
  • 2
  • 11