Reputation: 325
How do I apply a several classes to div?
<div class="al-timeline"
[ngClass]="{'right': isDisplayRight, 'remove-circle': !timelineData.date, 'first-circle': isFirstItem, isLastItem ? 'arrow' ? isDisplayRight: 'arrow-left' : 'arrow-right'}">
</div>
&.arrow {
&::after {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
content: '';
position: absolute;
left: 49%;
bottom: -9px;
}
&.arrow-right {
&::after {
border-left: 20px solid @al-main-color-2;
}
}
&.arrow-left {
&::after {
border-right: 20px solid @al-main-color-2;
}
}
}
I want to apply 'arrow' class if isLastItem
, and if arrow class is applied, I want to add 'arrow-left' class if isDisplayRight
else add 'arrow-right'
Upvotes: 0
Views: 35
Reputation: 2377
club the both conditions for second class
apply arrow-right
if (isLastItem && isDisplayRight)
condition is true
Upvotes: 1