Templates in Angular Breadcrumb component

28 Sep 20239 minutes to read

The Breadcrumb component provides a way to customize the items using itemTemplate and the separators using separatorTemplate properties.

Item Template

In the following example, Shopping Cart details are used as breadcrumb Items and the items are customized by the chips component using itemTemplate.

app.component.ts

import { Component } from '@angular/core';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

@Component({
    selector: 'app-root',
    template: `<div class="e-section-control">
            <!-- To Render Breadcrumb. -->
            <ejs-breadcrumb cssClass="e-breadcrumb-chips">
                <e-breadcrumb-items>
                    <e-breadcrumb-item text="Cart"></e-breadcrumb-item>
                    <e-breadcrumb-item text="Billing"></e-breadcrumb-item>
                    <e-breadcrumb-item text="Shipping"></e-breadcrumb-item>
                    <e-breadcrumb-item text="Payment"></e-breadcrumb-item>
                </e-breadcrumb-items>
                <ng-template #itemTemplate let-dataSource="">
                    <ejs-chiplist>
                        <e-chips>
                            <e-chip text= cssClass="e-primary"></e-chip>
                        </e-chips>
                    </ejs-chiplist>
                </ng-template>
            </ejs-breadcrumb>
            </div>`
})

export class AppComponent {}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BreadcrumbModule } from '@syncfusion/ej2-angular-navigations';
import { ChipListModule } from '@syncfusion/ej2-angular-buttons';

import { AppComponent } from './app.component';

@NgModule({
    imports: [BrowserModule, BreadcrumbModule, ChipListModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Separator Template

In the following example, the separators are customized with icons using separatorTemplate.

app.component.ts

import { Component } from '@angular/core';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

@Component({
    selector: 'app-root',
    template: `<div class="e-section-control">
            <!-- To Render Breadcrumb. -->
            <ejs-breadcrumb cssClass="e-breadcrumb-chips">
                    <e-breadcrumb-items>
                        <e-breadcrumb-item text="Cart"></e-breadcrumb-item>
                        <e-breadcrumb-item text="Billing"></e-breadcrumb-item>
                        <e-breadcrumb-item text="Shipping"></e-breadcrumb-item>
                        <e-breadcrumb-item text="Payment"></e-breadcrumb-item>
                    </e-breadcrumb-items>
                    <ng-template #separatorTemplate>
                        <span class="e-icons e-arrow"></span>
                    </ng-template>
                </ejs-breadcrumb>
                </div>`
})

export class AppComponent {}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BreadcrumbModule } from '@syncfusion/ej2-angular-navigations';
import { ChipListModule } from '@syncfusion/ej2-angular-buttons';

import { AppComponent } from './app.component';

@NgModule({
    imports: [BrowserModule, BreadcrumbModule, ChipListModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Customize Specific Item Template

The specific breadcrumb item can be customizable using itemTemplate with conditional rendering. In the following example, added the span element only for the breadcrumb text in breadcrumb item.

app.component.ts

import { Component } from '@angular/core';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

@Component({
    selector: 'app-root',
    template: `<div class="e-section-control">
            <!-- To Render Breadcrumb. -->
        <ejs-breadcrumb [enableNavigation]="false" cssClass="e-specific-item-template">
            <e-breadcrumb-items>
                <e-breadcrumb-item text="Home" url="https://ej2.syncfusion.com/home/angular.html"></e-breadcrumb-item>
                <e-breadcrumb-item text="Components" url="https://ej2.syncfusion.com/angular/demos/#/material/grid/over-view"></e-breadcrumb-item>
                <e-breadcrumb-item text="Navigations" url="https://ej2.syncfusion.com/angular/demos/#/material/menu/default"></e-breadcrumb-item>
                <e-breadcrumb-item text="Breadcrumb" url="./breadcrumb/default"></e-breadcrumb-item>
            </e-breadcrumb-items>
            <ng-template #itemTemplate let-dataSource="">
                <div>
                    <span *ngIf="dataSource.text === 'Breadcrumb'; else otherContent" class="e-searchfor-text"><span style="margin-right: 5px">Search for:</span>
                    <a class="e-breadcrumb-text" href="dataSource.url" onclick="return false"></a></span>
            <ng-template #otherContent>
                <a class="e-breadcrumb-text" href="dataSource.url" onclick="return false"></a>
                            </ng-template>
                </div>
            </ng-template>
        </ejs-breadcrumb>
        </div>`
})

export class AppComponent {}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BreadcrumbModule } from '@syncfusion/ej2-angular-navigations';
import { ChipListModule } from '@syncfusion/ej2-angular-buttons';

import { AppComponent } from './app.component';

@NgModule({
    imports: [BrowserModule, BreadcrumbModule, ChipListModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);