Dynamic class assignment in Typescript

Question

I'm working on my post-graduate assignment where I have to create a simple calculator. I'm almost there but the final element - making the negative result red and positive green is still missing. The result must be seen in an input field

I was trying to use [ngClass]= with two conditions but it is not working:

<input type="number" [ngStyle]="resultStyling" value="{{ result }}" name="resultInput" 
[ngClass]="{
  'red': <=0,
  'green': !<=0
  }">

the public classes in component.ts for the calculator are:

public field1: number;
  public field2: number;
  public result: number;
  public isPositive: boolean = true;

The HTML:

<input type="number" [ngStyle]="inputStyling" name="field1" [(ngModel)]="field1"><br>
<button (click)="add()" [ngStyle]="buttonStyling">+</button>
<button (click)="substract()" [ngStyle]="buttonStyling">-</button>
<button (click)="multiply()" [ngStyle]="buttonStyling" >*</button>
<button (click)="divide()" [ngStyle]="buttonStyling">/</button><br><input type="number" [ngStyle]="inputStyling" name="field2" [(ngModel)]="field2">
<br>=<br>
<input type="number" [ngStyle]="resultStyling" value="{{ result }}" name="resultInput">

And the CSS are just 2 simple classes `.red {color: red} and .green {color: green}.

I can't figure out how to make the result show in color. Do you have any suggestions what may be the solution? Maybe the [ngClass] should just be written in a different way?

The whole code may be also found on my stackblitz: https://stackblitz.com/edit/k-rapacz-angular-day1-z6vxu1

Thank you in advance for the support!

I don't do Angular, but 'red': <=0 looks suspicious. How is it supposed to know what should be tested against 0? 'green': !<=0 looks even more suspicious, you might consider >. Finally, both of those conditions are trying to apply to 0. One of them (probably red) shouldn't include 0 (e.g., <0 for red and >=0 for green). — T.J. Crowder
– T.J. Crowder, Commented May 18, 2020 at 6:54
I know, right? I was trying to exchange it with {{ result }} <=0 but also with no success. @T.J.Crowder - thanks for the hints! :) — JoseTurron
– JoseTurron, Commented May 18, 2020 at 6:56

Poul Kruijt · Accepted Answer · 2020-05-18 06:59:23Z

3

If you look at the angular documentation there are multiple ways to conditionally add a class:

In your case you can do:

<input [ngClass]="{'red': result < 0, 'green': result > 0}">

or

<input [class.red]="result < 0" [class.green]="result > 0">

if you want 0 to have a color too, you can also just do:

[ngClass]="result < 0 ? 'red' : 'green'"

working example

answered May 18, 2020 at 6:59

Poul Kruijt

72.3k12 gold badges152 silver badges152 bronze badges

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

Comments

Bruno Martins · Accepted Answer · 2020-05-18 06:58:02Z

2

What about the class.my-class directive ? It applies the specified class to the element only if the condition is met :

<input type="number" [ngStyle]="resultStyling" value="{{ result }}" name="resultInput" 
[class.red]="result <= 0" [class.green]="result > 0">

answered May 18, 2020 at 6:58

Bruno Martins

9922 gold badges11 silver badges22 bronze badges

Comments

nXn · Accepted Answer · 2020-05-18 07:01:04Z

1

Styles may be applied in the below way using Ternary Operator.

In you html last input, you can add a ngClass and add the styles based on ternary operator.

<input type="number" [ngStyle]="resultStyling" [ngClass]="result>0 ? 'green' : 'red'" value="{{ result }}" name="resultInput">
<br>

I the above code, we are checking if result is greater than 0 and, if yes, the green class is applied else, the red class is applied.

You can read more about applying classes here .

answered May 18, 2020 at 7:01

nXn

9446 silver badges13 bronze badges

Collectives™ on Stack Overflow

Dynamic class assignment in Typescript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related