How to add translate for the breadcrumbs in coreui angular

Question

I am using coreui template for my angular application. In which i have added the @ngx-translate/core to translate my app. I have done translation for everything, but i couldn't add translation for the breadcrumbs provided by CoreUI.

layout.html

<div class="app-body">
  <app-sidebar
    #appSidebar
    [fixed]="true"
    [display]="'lg'"
    [minimized]="sidebarMinimized"
    (minimizedChange)="toggleMinimize($event)"
  >
    <app-sidebar-nav
      [navItems]="navItems"
      [perfectScrollbar]
      [disabled]="appSidebar.minimized"
    ></app-sidebar-nav>
    <app-sidebar-minimizer></app-sidebar-minimizer>
  </app-sidebar>
  <!-- Main content -->
  <main class="main">
    <!-- Breadcrumb -->
    <cui-breadcrumb> </cui-breadcrumb> //breadcrumbs part
    <div class="container-fluid">
      <router-outlet></router-outlet>
    </div>
  </main>
</div>

Routes File:

const routes: Routes = [
  {
    path: '',
    data: {
      title: 'Devices',
    },
    children: [
      {
        path: '',
        component: ListComponent,
        data: {
          title: 'List',
        },
      },
      {
        path: 'new',
        component: AddComponent,
        data: {
          title: 'Add',
        },
        canDeactivate: [CanDeactivateGuard],
      },
      {
        path: 'edit/:id',
        component: EditComponent,
        data: {
          title: 'Edit',
        },
        canDeactivate: [CanDeactivateGuard],
      },
      {
        path: ':id',
        component: DetailComponent,
        data: {
          title: 'Detail',
        },
      },
      {
        path: ':id/configuration/add',
        component: AddTrafficSteeringComponent,
        data: {
          title: 'Add Configuration',
        },
        canDeactivate: [CanDeactivateGuard],
      },
      {
        path: ':id/configuration/edit/:configurationId',
        component: EditTrafficSteeringComponent,
        data: {
          title: 'Edit Configuration',
        },
        canDeactivate: [CanDeactivateGuard],
      },
    ],
  },
];

I would like to know how to add translation for the breadcrumbs

Answer 1

I solved this by copying the CoreUI component and slightly modifying it:

breadcrumb.component.html (note the check for a translate key)

<ol class="breadcrumb">
    <ng-container *ngFor="let breadcrumb of breadcrumbs | async, let last = last">
        <li class="breadcrumb-item"
            *ngIf="breadcrumb.label.title && (breadcrumb.url.slice(-1) == '/' || last)"
            [ngClass]="{active: last}">
            <a *ngIf="!last" [routerLink]="breadcrumb.url">{{breadcrumb.label.translate ? (breadcrumb.label.title | translate) : breadcrumb.label.title}}</a>
            <span *ngIf="last" [routerLink]="breadcrumb.url">{{breadcrumb.label.translate ? (breadcrumb.label.title | translate) : breadcrumb.label.title}}</span>
        </li>
    </ng-container>
</ol>

breadcrumb.component.ts (unchanged)

import {Component, ElementRef, Inject, Input, OnDestroy, OnInit, Renderer2} from '@angular/core';
import {DOCUMENT} from '@angular/common';

import {BreadcrumbService} from './breadcrumb.service';

function Replace(el: any): any {
    const nativeElement: HTMLElement = el.nativeElement;
    const parentElement: HTMLElement = nativeElement.parentElement;

    // move all children out of the element
    while (nativeElement.firstChild) {
        parentElement.insertBefore(nativeElement.firstChild, nativeElement);
    }

    // remove the empty element(the host)
    parentElement.removeChild(nativeElement);
}

@Component({
    selector: 'app-custom-breadcrumb',
    templateUrl: './breadcrumb.component.html',
})
export class BreadcrumbComponent implements OnInit, OnDestroy {

    @Input() fixed: boolean;
    breadcrumbs;
    private readonly fixedClass = 'breadcrumb-fixed';

    constructor(
        @Inject(DOCUMENT) private document: any,
        private renderer: Renderer2,
        public service: BreadcrumbService,
        public el: ElementRef
    ) {
    }

    ngOnInit(): void {
        Replace(this.el);
        this.isFixed(this.fixed);
        this.breadcrumbs = this.service.breadcrumbs;
    }

    ngOnDestroy(): void {
        this.renderer.removeClass(this.document.body, this.fixedClass);
    }

    isFixed(fixed: boolean = this.fixed): void {
        if (fixed) {
            this.renderer.addClass(this.document.body, this.fixedClass);
        }
    }
}

breadcrumb.service.ts (unchanged)

import { Injectable } from '@angular/core';
import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';
import { BehaviorSubject, Observable } from 'rxjs';
import { filter } from 'rxjs/operators';

@Injectable({
    providedIn: 'root'
})
export class BreadcrumbService {

    breadcrumbs: Observable<Array<any>>;

    private breadcrumbSubject: BehaviorSubject<Array<any>>;

    constructor(private router: Router, private route: ActivatedRoute) {

        this.breadcrumbSubject = new BehaviorSubject<any[]>(new Array<any>());

        this.breadcrumbs = this.breadcrumbSubject.asObservable();

        this.router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe((event) => {
            const breadcrumbs = [];
            let currentRoute = this.route.root;
            let url = '';
            do {
                const childrenRoutes = currentRoute.children;
                currentRoute = null;
                // tslint:disable-next-line:no-shadowed-variable
                childrenRoutes.forEach(route => {
                    if (route.outlet === 'primary') {
                        const routeSnapshot = route.snapshot;
                        url += '/' + routeSnapshot.url.map(segment => segment.path).join('/');
                        breadcrumbs.push({
                            label: route.snapshot.data,
                            url
                        });
                        currentRoute = route;
                    }
                });
            } while (currentRoute);

            this.breadcrumbSubject.next(Object.assign([], breadcrumbs));

            return breadcrumbs;
        });
    }
}

Use it like this:

{
        path: 'new',
        component: AddComponent,
        data: {
          title: 'Add', translate: true
        },
        canDeactivate: [CanDeactivateGuard],
      },