CODEWITHSUNDEEP
angular
prolina
prolina

Reputation: 325

How do I apply a several classes to div using ngClass?

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

Answers (1)

Shlok Nangia
Shlok Nangia

Reputation: 2377

club the both conditions for second class

apply arrow-right if (isLastItem && isDisplayRight) condition is true

Upvotes: 1

Related Questions