Implementing a Dynamic Tab Framework in Angular

The code for this useful Angular Dynamic Tabs Framework is on my GitHub:
JeffreyBane/ALF-My-TabFramework-App (github.com)

Inevitably, some group of users in your organization is going to want tabbing functionality in one (all) of their applications. As our business users are whiny little rodents that needed to have been spanked more as children a true gift to us that we should appreciate daily, let’s look at a simple tab framework I put together not too long ago.

Setting up a dynamic tabs framework in Angular is quite simple thanks to Angular Material. However, there are some gotchas. Let’s say our toddlers on a sugar high our wonderful business users have the following requirements:

• The first tab is a home tab of sorts that cannot be closed.
• If a new tab is triggered that is already open, the application should navigate to the existing tab rather than opening a new one.
• If we close a tab, the result should be seamless. If we close a tab we’re not currently on, we should stay put. If we close the tab we are currently on, we’d like to navigate to the tab directly to the left of the tab we just closed.

We’ll use a <nav mat-tab-nav-bar> in this example as we’ll use the tabbing to navigate between different routes. We’ll also use a series of buttons to open new tabs, but in your application tabs would be opened by certain events, say preforming a search, double clicking a search result, etc.

Let’s have a look at the structure of the project:

Home will be the route for our home tab (duh), and the tabs that can be added dynamically will load the components “settings” or “search-results”. The bulk of the tabbing logic is handled in our tab service. Let’s look at the tab object we’ll be using first:

export interface Tab {
    routerLink: string;
    matIcon: string;
    label: string;
}

Each tab will have 3 properties – the router link, a material icon that will be displayed on the tab as well as the text of the label. Our tab service handles maintaining a tab array to which we can add or remove tabs on the fly:

    public addTab(tab: Tab) {
        const exists = this.tabs.find(t => t.routerLink === tab.routerLink);
            if (!exists) {
                this.tabs.push(tab);
            }
        // navigate to either the new tab or the existing tab
        this._router.navigate([tab.routerLink]);
    }

Note – Angular Material is smart enough (at least in the newer versions) to not add a duplicate tab on the screen if a tab gets added to the underlying tab array multiple times. However, the tab array can become full of duplicates, and when an array contains all kinds of duplicates, and my OCD goes all Wapner at 3 o’clock on me. So, in the addTab method, the first thing we do is check if the tab with that link already exists. If not add it, then navigate to the tab we either just added or the existing one.

Removing a tab is also straightforward:

    public removeTab(index: number) {
        let navigateAway = false;
        if (this._router.url === this.tabs[index].routerLink) {
            navigateAway = true;
        }
        this.tabs.splice(index, 1);
        if (navigateAway) {
            this._router.navigate([this.tabs[index - 1].routerLink]);
        }
    }

This time, we’ll check to see if we’re on the tab that’s being closed. If so (navigateAway = true), we’ll route exactly one tab to the left. If not, don’t navigate anywhere.

So far so good. Now in our nav-component, we just bind the tabs to our array, wire up the delete method, and away we go:

So, let’s fire this thing up. Go ahead and click the first button and add a few search results tabs, say 5 or so. Then click on the second button and notice that you’re redirected to the already open tab with the route “/SearchResults/3”. Plus, if you examine the array in the console, you’ll notice that no matter how many times you click the second button, the array stays free of duplicates as the goddamn universe intended.

Finally close some tabs, starting with tabs you’re not on and also the one you are on and notice the navigation behaves as we expect. Also, the home tab is always present.

So, there you go – now you can wire up a solid Angular dynamic tabs framework and give that parade of asshats group of very competent business users of yours a way to tab their brains out!