Creating Breadcrumb for Angular. A simple and easier way.

Angular router is awesome. It gives us a lot of opportunity to make our application more dynamic and manageable. In this short post I will try to explain how to create simple breadcrumb using Angular Router service.

The Demo Project

Let’s take a look at Demo Project.

Set up Routes

First we have to supply breadcrumb text to each route using data property. We will also access routeParams in breadcrumb by using angular like double curly braces syntax {{routeParam}}. And of course we have to implement that feature to access routeParams and it’s super easy.

Route Part Service

Now we have to create a service “route-parts.service.ts”, this service has method called ‘generateRouteParts’ which is a recursive function, it invokes itself until it found all the childs of current activated route and it returns an array of ‘IRoutePart’. ‘IRoutePart’ is an interface which has several properties which will be used to store breadcrumb text, url, routeParams etc.

Breadcrumb Component

We have our Routes and service set up. Let's create our breadcrumb component. When the breadcrumb component instantiates it starts watching route change event, so that it can get route parts from route-parts service and update breadcrumb text and url.

It also maps through the parts to construct url for each child routes. The parseText method find appropriate value in part.params object replace the text in curly braces with route parameter value.

Now let's take a look in breadcrumb template. It’s fairly simple, we just loop through the parts and display breadcrumb text with routerLink.

Github Repository

I’ve only explained the key points. You might want to look inside the demo project. Here is the Github repo.

Call To Action

If you are going to build an Angular dashboard based application, then I would suggest you to check out and get my latest Angular Material Design Admin Template.

Click here to get the Egret — Angular Material Design Admin template.