Issue
I have a div that I want to style based on a condition.
If styleOne is true I want a background colour of red. If StyleTwo is true, I want the background colour to be blue. I've got half of it working with the below code.
<div id="myDiv" [ngStyle]="styleOne && {'background-color': 'red'}">
Is it possible to add a condition to say:
- if styleOne is true, do this
- if styleTwo is true, do this?
Edit
I think i've resolved it. It works. Not sure if it's the best way:
<div id="div" [ngStyle]="styleOne && {'background-color': 'red'} || styleTwo && {'background-color': 'blue'}">
Solution
For a single style attribute, you can use the following syntax:
<div [style.background-color]="style1 ? 'red' : (style2 ? 'blue' : null)">
I assumed that the background color should not be set if neither style1
nor style2
is true
.
Since the question title mentions ngStyle
, here is the equivalent syntax with that directive:
<div [ngStyle]="{'background-color': style1 ? 'red' : (style2 ? 'blue' : null) }">
Answered By - ConnorsFan
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.