Menu
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?
928
There are several ways to add styles to a component: By setting styles or styleUrls metadata. Inline in the template HTML. With CSS imports.
What Is Conditional Styling? In simple words, it is changing CSS based on a set of conditions or a state. The CSS that will be changed and/or added based on a condition can be inline styles or styled components among the many different ways of adding CSS in React.
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'}"> You can use style.propertyName to set any conditional style property.
<div class="col-md-3 d-flex justify-content-center align-items-center" [style.background]="someFunction()"> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
