It appears that you are utilizing CoreUI.

While CoreUI doesn't natively support breadcrumb translation, you have the option to duplicate the breadcrumb component and customize it for translation purposes.

This response has been adapted from a solution provided here.

breadcrumb.component.html (Note that it will attempt to fetch the translated title; if not available, it will display the raw value used in the title 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" >{{ tr[breadcrumb.label.title] != null ? tr[breadcrumb.label.title] : breadcrumb.label.title }}</a>
        <span *ngIf="last" [routerLink]="breadcrumb.url" >{{ tr[breadcrumb.label.title] != null ? tr[breadcrumb.label.title] : breadcrumb.label.title }}</span>
    </li>
</ng-container>

breadcrumb.component.ts

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


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 {
    public tr; // translation service

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

    constructor(
        @Inject(DOCUMENT) private document: any,
        private renderer: Renderer2,
        public service: BreadcrumbService,
        public el: ElementRef,
        private translationService: TranslationService,
    ) {
        this.tr = translationService.getTranslations();
    }

    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;
                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;
        });
    }
}

Ensure your Translation service is configured as follows: translation.service.ts

import {Injectable, LOCALE_ID, Inject} from '@angular/core';
import {HttpClient, HttpHeaders, HttpParams} from '@angular/common/http';

@Injectable({
    providedIn: 'root'
})


export class TranslationService {

    private trans_es;
    private trans_en;

    private localeId = '';
    private es = 'es';
    private en = 'en';

    public translatedLabels;

    headers: HttpHeaders = new HttpHeaders({
        'Content-Type': 'application/json'
    });

    constructor(@Inject(LOCALE_ID) private locale) {


        this.trans_es = {};
        this.trans_en = {};

        
        this.trans_es['typography'] = 'Tipografía';
        this.trans_en['typography'] = 'Typography';
        this.trans_es['colors'] = 'Colores';
        this.trans_en['colors'] = 'Colors';
       

        if (locale === 'en') {
            const s = JSON.stringify(this.trans_en);
            const c = JSON.parse(s);
            this.translatedLabels = c;
        } else {
            const s = JSON.stringify(this.trans_es);
            const c = JSON.parse(s);
            this.translatedLabels = c;
        }
    }

    public getTranslations() {
        return this.translatedLabels;
    }


}

In the HTML where the breadcrumbs are displayed:

<app-custom-breadcrumb>
        <li class="breadcrumb-menu d-md-down-none">
        </li>
</app-custom-breadcrumb>

You can then utilize it on every route like so:

const routes: Routes = [
  {
    path: '',
    component: ColorsComponent,
    data: {
      title: 'colors'
    }
  }
];

This helpful tool can be used for dependency management: https://www.npmjs.com/package/@biesbjerg/ngx-translate-extract-marker

To make use of this dependency, follow these steps:

➜ npm i @biesbjerg/ngx-translate-extract-marker --save

After installing the dependencies, import and integrate it as shown below:

import { marker as _ } from "@biesbjerg/ngx-translate-extract-marker";

import { ColorsComponent } from './colors.component';
import { TypographyComponent } from './typography.component';

const routes: Routes = [
  {
    path: '',
    data: {
      title: _("NameEng")
    },
    children: [
      {
        path: '',
        redirectTo: 'colors'
      },
      {
        path: 'colors',
        component: ColorsComponent,
        data: {
          title: 'Colors'
        }
      },
      {
        path: 'typography',
        component: TypographyComponent,
        canActivate:[AuthGuard],
        data: {
          title: 'Typography'
        }
      },
      {
        path: 'category',
        component: CategoryComponent,
        canActivate:[AuthGuard],
        data: {
          title: 'Categories'
        }
      },
      {
        path: 'subcategory',
        component: SubCategoryComponent,
        canActivate:[AuthGuard],
        data: {
          title: 'Sub Categories'
        }
      }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class ThemeRoutingModule {}