Conditional Styling and Binding

问题

In Angular 2 I am binding a dollar value like this inside a TABLE TD.

<td>
  {{eachOutlet.dollarValue}}
</td>

This dollarValue will be less than 0 or equal to 0 or greater than 0. When it is less than zero it should show up in "Red" color. When it is zero, nothing should show up. Just blank text. When it is greater than zero, it should use thousands separator and show the number.

How can I apply such conditional styling using Angular 2 binding? Is it even possible to do it ?

回答1:

<td>
  <span 
    *ngIf="eachOutlet.dollarValue != 0"
    [style.color]="eachOutlet.dollarValue < 0 ? 'red' : null">
      {{eachOutlet.dollarValue | number:'1.0-2'}}
  </span>
</td>

You can also create a directive that does the styling (except the number pipe) to make it easier to reuse over different elements.

Plunker example

回答2:

Another option for more than one style property:

In Template:

<div style="word-break: break-all;" [ngStyle]="{ 'top': getTop() +'px', 'left': getLeft() +'px' }"> </div>

And in the Component:

getTop(){
    return (this.topValueShowComment> 0)? this.topValueShowComment : 0;
}

getLeft(){
    return (this.leftValueShowComment> 0)? this.leftValueShowComment : 0;
}

回答3:

We can do like this.

<div class="responsive-standalone--Overlay" (click)="mobileRMenu()" [style.display]="rMenu ? 'block' :'none'"></div>

来源：https://stackoverflow.com/questions/41305404/conditional-styling-and-binding

标签

angular

conditional

styling