Showing navigation path location of current page or screen in angular 7

Question

Using angular 7(Angular flux is not used.), requirement is, we need to show the path of current screen. Like, lets say there are a,b,c,d screens. We can navigate from a->b->c->d. This path of "a->b->c->d" need to be shown. Also, we can go back by clicking on back button so, if click on back when on d then we are at a->b->c. Structure is like, there is a component X which is parent inside <router-outlet> is written where components a,b,c,d will attached based on navigation. Back button and header is available in component X, and header where this path location need to be shown.

Click for Picture

Each component a,b,c,d require states, (angular 7 states).

For implementing back button routing event is subscribe, which push current route and state into stack and when clicking on back, pop the last route and navigate to that with angular states required for that page.

Also, there are tabs in screen present like this click for picture When click on tab1 components are a->b->c->d when click on tab2 no matters on which screen, e->f components are there. so navigation path now should change accordingly. same for tab3. These a,b,c,d also clickable, such that when click on b, we will navigate to a->b(now a->b should be shown).

How, this can be implemented in angular 7? Any help is appreciated.

Answer 1

You can do that with events of Router module , then create a component named breadcrumb to show navigation

Final result will be as below :

breadcrumb.component.ts:

import { Component, ViewEncapsulation } from '@angular/core';
import { ActivatedRoute, Router, ActivatedRouteSnapshot, UrlSegment, NavigationEnd } from '@angular/router';

@Component({
    selector: 'app-breadcrumb',
    encapsulation: ViewEncapsulation.None,
    templateUrl: './breadcrumb.component.html'
})
export class BreadcrumbComponent {
    public pageTitle: string;
    public breadcrumbs: { name: string; url: string }[] = [];

    constructor(
        public router: Router,
        public activatedRoute: ActivatedRoute) {
        this.router.events.subscribe(event => {
           if (event instanceof NavigationEnd) {
              this.breadcrumbs = [];
              this.parseRoute(this.router.routerState.snapshot.root);
           }
        })
    }

    parseRoute(node: ActivatedRouteSnapshot) {
        if (node.data['breadcrumb']) {
            if (node.url.length) {
                let urlSegments: UrlSegment[] = [];
                node.pathFromRoot.forEach(routerState => {
                    urlSegments = urlSegments.concat(routerState.url);
                });
                const url = urlSegments.map(urlSegment => {
                    return urlSegment.path;
                }).join('/');
                this.breadcrumbs.push({
                    name: node.data['breadcrumb'],
                    url: '/' + url
                })
            }
        }
        if (node.firstChild) {
            this.parseRoute(node.firstChild);
        }
    }

}

breadcrumb.component.html:

<ol class="breadcrumb" id="breadcrumb">
    <li class="breadcrumb-item">>
            <i class="fa fa-home mr-2"></i>Home</a>
    </li>
    <li *ngFor="let breadcrumb of breadcrumbs; let i = index;" class="breadcrumb-item">
        <a [hidden]="i == (breadcrumbs.length - 1)">{{breadcrumb.name}}</a>
        <span [hidden]="i != (breadcrumbs.length - 1)">
            <b>{{breadcrumb.name}}</b>
        </span>
    </li>
</ol>

wherever you define a route , set a data named breadcrumb and assign the specific name as below :

with module :

{ path: 'incident', loadChildren:(...), data: { breadcrumb: 'Incident' } }

with component :

{ path: "personal",component: (...), data: { breadcrumb: "Personal" } }

Usage :

in your layout or master page put the following app-breadcrumb

<app-breadcrumb></app-breadcrumb>