Blader, an attempt to mimic Azure Portal like Blades with angular

In this post I will try to mimic the Azure Portal like navigation experience better known as Blades with angular. You can find the code on github.

Some background information

As you might know I am currently in charge of building up a new ui layer for a plant control system for my employer.
After some sprint iterations together with the UX team our stakeholders decided that the Azure Portal like navigation would actually be a pretty good fit to the way a plant control operator interacts with the system.

That was the trigger to go and look for some already available components or come up with an own approach. So far I haven’t found something similar to Blades in the angular world and that is why I took the time and created this blader-repo.

The basic features

Blade = Component

A blade is nothing else then an angular component. A blade can be used in the classical angular way and can be mapped to any route. Opening that route the blade gets presented.
On the other hand any blade can be opened by the BladeManager‘s api. The blade then gets appended to the right next to the caller. The initial blade is called the entry blade.

The entry blade

The entry blade can be configured via the blader-route as a parameter. It is the starting point of the Azure Portal like navigation experiences. Together with the BladeManager‘s api it is now possible to create that desired drill down experience. So the entry blade should define the start of the navigation journey.

The blader prototype in action

Below you can get an impression of what the very unspectacular blader-repo looks like.

Some drawbacks

Of course the above approach has one disadvantage and that is that I haven’t found a way yet to have blades defined in lazy loaded angular modules. I also mention this in the readme file on my github repo. So if you know the solution or you are generally interested in this approach don’t hesitate to clone or send a PR.