Varying colors in breadcrumb

[Walter Cook]

With a breadcrumb of three items, the there a way to vary the color of each?
Given:

<ejs-breadcrumb [enableNavigation]="true" class="breadCrumb" >

        <e-breadcrumb-items>

            <e-breadcrumb-item text="Requirements" url="/requirements"></e-breadcrumb-item>. Make it red

            <e-breadcrumb-item text="Requirement Detail"></e-breadcrumb-item> Make it blue

            <e-breadcrumb-item text={{currentRequirementTitle}}></e-breadcrumb-item> Make it green

        </e-breadcrumb-items>

I've tried even inline styling and can't get the font color to change.
Thanks

[YuvanShankar Arunagiri]

Hi Walter,

We have validated your reported query and prepared the sample based on your requirement.

Please refer the below code snippet. Using the beforeItemRender event to add the separate class for each item and provide the styles based on that class name.

[app.component.html]:

<ejs-breadcrumb [enableNavigation]="true" class="breadCrumb" (beforeItemRender)="beforeItemRenderHandler($event)">

            <e-breadcrumb-items>

                <e-breadcrumb-item text="Requirements" url="/requirements"></e-breadcrumb-item>

                <e-breadcrumb-item text="Requirement Detail"></e-breadcrumb-item>

                <e-breadcrumb-item text="last Details"></e-breadcrumb-item>

            </e-breadcrumb-items>

        </ejs-breadcrumb>

[app.component.ts]:

beforeItemRenderHandler(args: BreadcrumbBeforeItemRenderEventArgs): void {

        if (args.item.text === 'Requirements') {

            args.element.classList.add('e-item-1');

        }

        else if (args.item.text === 'Requirement Detail') {

            args.element.classList.add('e-item-2');

        }

        if (args.item.text === 'last Details') {

            args.element.classList.add('e-item-3');

        }

    }

[app.component.css]:

.e-item-1 .e-breadcrumb-text {

    color: red !important;

}

 

.e-item-2 .e-breadcrumb-text {

    color: blue !important;

}

 

.e-item-3 .e-breadcrumb-text {

    color: green !important;

}

For your convenience, we have prepared the sample.

Sample link: https://stackblitz.com/edit/angular-ychszg?file=app.component.ts

Please get back to us if you need further assistance on this.

Regards,

Yuvan Shankar A

[Walter Cook]

Perfect!

Thanks so much.

[YuvanShankar Arunagiri]

Hi Walter,

We are happy to hear that your requirement has been fulfilled. Please get back to us if you need any further assistance on this.

Regards,

YuvanShankar A