Geek Answers Handbook

NgIf you set the color?

I have json:

[{ "nodename": "Main application Server", "enabled": true }, { "nodename": "Main Server", "enabled": false }]

and I will show this data in my template using ngFor:

 <div class="row" *ngFor="let list of lists"> <div class="col-md-12 col-xs-12"> <div class="panel panel-primary"> <div class="panel-heading"> <h2 class="panel-title text-center">Server: {{ list.nodename }}, {{ list.enabled }}</h2> </div> </div> </div> <div>

And now I would set a different color in my panel-primary in the template: if "enabled": true , than set green, and if "enabled": false , set red. How to do it? with ngIf=... ? Or something else?

+6
source share
2 answers

You can use the ngStyle directive:

 <div class="panel panel-primary" [ngStyle]="{'background-color': list.enabled? 'green' : 'red'}">

or ngClass:

 <div class="panel panel-primary" [ngClass]="{greenClass: list.enabled, redClass: !list.enabled}">

With the following styles in your component:

 @Component({ (...) styles: [ ` .greenClass { background-color: green } .redClass { background-color: red } ` ] })
+8
source

You would create a CSS class - and switch the class through ngClass

 <div class="panel panel-primary" ng-class="{'green-class': list.enabled, 'red-class' : !list.enabled }">
0
source

More articles:


All Articles