Dynamic breadcrumbs on Ng Zorro

Question

How can I change dynamically breadcrumbs? I have channels inside of channel I want to change breadcrumbs to Channel / [channel name].

I'm using auto breadcrumbs:

<nz-breadcrumb nz-col nzFlex="auto" [nzAutoGenerate]="true"></nz-breadcrumb>

Answer 1

Unfortunately, nz-breadcrumb from ng-zorro UI component library (currently version 10.2.1) does not support dynamic paths. You can achieve this by manually changing a name of a route item in Angular router when the route changes in your application.

import { Router, ActivatedRoute } from "@angular/router";

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

ngOnInit() {
  this.route.params.subscribe(params => {
    this.router.config
    // ... change the name of routes based on received parameters
  });
}

Alternatively, you can use a library that have it already implemented i.e ngx-breadcrumbs.

import { BreadcrumbService } from 'xng-breadcrumb';

constructor(private breadcrumbService: BreadcrumbService, private route: ActivatedRoute) {}

ngOnInit() {
  this.route.params.subscribe(params => {
    breadcrumbService.set('@<alias>', '<breadcrumb label>')
  });
}