Creare un breadcrumb con Angular

In questo articolo vedremo come creare un breadcrumb con Angular e Bootstrap 5, l'app di esempio è composta da tre componenti Home, Articles, NewArticle per le rotte, e un componente Breadcrumb per generare il percorso.

Iniziamo quindi a generare i componenti tramiite il comando ng generate di Angular CLI

ng g c home
ng g c articles
ng g c newarticle
ng g c breadcrumb

adesso apriamo il file app.module.ts e definiamo le rotte usando i componenti Home e Articles e NewArticle

app.module.ts

//....
//....

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot([
      {
        path: '',
        component: HomeComponent,
        data: {
          breadcrumb: [
            {
              label: 'Home',
              url: '',
              active: true,
              class: 'breadcrumb-item active'
            }
          ]
        }
      },
      {
        path: 'articles',
        component: ArticlesComponent,
        data: {
          breadcrumb: [
            {
              label: 'Home',
              url: '/',
              class: 'breadcrumb-item',
              active: false
            },
            {
              label: 'Articles',
              url: '',
              active: true,
              class: 'breadcrumb-item active'
            }
          ]
        }
      },
      {
        path: 'newarticle',
        component: NewarticleComponent,
        data: {
          breadcrumb: [
            {
              label: 'Home',
              url: '/',
              class: 'breadcrumb-item',
              active: false
            },
            {
              label: 'Articles',
              url: '/articles',
              active: false,
              class: 'breadcrumb-item'
            },
            {
              label: 'New Articles',
              url: '',
              active: true,
              class: 'breadcrumb-item active'
            }
          ]
        }
      }
    ])
  ],
  declarations: [AppComponent, BreadcrumbComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

per le rotte è stato definito l'attributo data contenente l'oggetto breadcrumb con informazioni relative al percorso.

Adesso modifichiamo il file app.component.html in modo da avere un menù di navigazione e la direttiva router-outlet, e inoltre inseriamo il componente Breadcrumb tramite la direttiva <app-breadcrumb></app-breadcrumb>

app.component.html

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a href="#" routerLink="/" class="nav-link">Home</a>
  </li>
  <li class="nav-item">
    <a href="#" routerLink="/articles" class="nav-link">Articles</a>
  </li>
  <li class="nav-item">
    <a href="#" routerLink="/newarticle" class="nav-link">New Article</a>
  </li>
</ul>
<div class="row">
  <div class="col">
    <hr />
    <app-breadcrumb></app-breadcrumb>
  </div>
</div>
<router-outlet></router-outlet>

Adesso dobbiamo fare in modo che il componente Breadcrumb generi il percorso per ciascuna rotta che abbiamo definito

breadcrumb.component.ts

import { Component, OnInit } from '@angular/core';
import { NavigationEnd, Router } from '@angular/router';

//....
//....

export class BreadcrumbComponent implements OnInit {
  constructor(private route: Router) {}
  b: any;

  ngOnInit() {
    this.route.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
        var snapshot = this.route.routerState.snapshot;
        this.b = snapshot.root.children[0].data.breadcrumb;
      }
    });
  }
}

utilizzando il modulo Router di Angular recuperiamo l'oggetto breadcrumb che abbiamo definito nell'attributo data per ciascuna rotta, e lo salviamo in una variabile (b) che utilizzeremo per generare il percorso nel template del componente

breadcrumb.component.html

<!-- breadcrumb >> -->
<div class="row">
  <div class="col-sm">
    <nav
      style="--bs-breadcrumb-divider: url(&#34;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E&#34;);"
      aria-label="breadcrumb">
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><b>You are here</b></li>
        <ng-container *ngFor="let b of b">
          <li *ngIf="b.active; else elseBlock" class="{{b.class}}">{{b.label}}</li>
          <ng-template #elseBlock>
            <li class="{{b.class}}"><a href="#" routerLink="{{b.url}}">{{b.label}}</a></li>
          </ng-template>
        </ng-container>
      </ol>
    </nav>
  </div>
</div>
<!-- << breadcrumb  -->