Conditional Styling of an Angular component

Question

I am trying to style a component on basis of a condition in following way.

<div class="col-md-3 d-flex justify-content-center align-items-center" ng-style ="{ ' background-color' : (vars.state=='Signup')? '#73c7af' : '#ffffff' }">

and my vars.state=Signup. So it according to this background of this div should be #73c7af but it still white. Can anybody tell me where I am making mistake?

Answer 1

ng-style is the syntax for AngularJS. For Angular 2+, use [ngStyle]="" syntax. (see documentation )

<div class="col-md-3 d-flex justify-content-center align-items-center" 
     [ngStyle]="{'background-color': (vars.state=='Signup') ? '#73c7af' : '#ffffff'}">

Answer 2

您可以使用 style.propertyName 来设置任何条件样式属性。

<div class="col-md-3 d-flex justify-content-center align-items-center" [style.background]="someFunction()">