Issue
Is there a way to simplify this ngClass?
edit
? - This one works finevalue ===
- This is a child component. Each of the two parent components pass thevalue
property down as an @Input. Child component 1 has areleased
property. Child component 2 does not have thereleased
property.- If the
value
isvalue1
AND thereleased
property istrue
, no class is added. However, if thereleased
property isfalse
add a class calledclass-3
. - If the
value
isvalue2
, always addclass-3
as there is noreleased
property.
The below works, but it feels like it could be streamlined.
<div [ngClass]="[
edit ? 'class-1' : 'class-2',
value === 'value1' && released ? '' : 'class-3',
value === 'value2' ? 'class-3' : ''
]">
Solution
You can optimise a part of it by moving to [class], much shorter and concise:
<div [class.class-3]="(value === 'value1' && !released) || value === 'value2'"
... /the rest of the ngClass for edit
</div>
or keep it all in ngClasse. It can be also shorter:
<div [ngClass]="[
edit ? 'class-1' : 'class-2',
released ? value != 'value1' || value==='value2'? : 'class-3' : ''
]">
Answered By - Vega
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.