Search results

Templates in Angular Breadcrumb component

03 Dec 2021 / 1 minute 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.

Source
Preview
app.component.ts
app.module.ts
main.ts
Copied to clipboard
import { Component } from '@angular/core';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

@Component({
    selector: 'app-root',
    template: `<!-- 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={{dataSource.text}} cssClass="e-primary"></e-chip>
                        </e-chips>
                    </ejs-chiplist>
                </ng-template>
            </ejs-breadcrumb>`
})

export class AppComponent {}
Copied to clipboard
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 { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Separator Template

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

Source
Preview
app.component.ts
app.module.ts
main.ts
Copied to clipboard
import { Component } from '@angular/core';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

@Component({
    selector: 'app-root',
    template: `<!-- 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>`
})

export class AppComponent {}
Copied to clipboard
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 { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);