JSPM

import { SDKTabsModule } from 'sdk-tabs';

@NgModule({
    imports: [
        SDKTabsModule
    ]
})
export class AppModule { }

// Required properties.
tabs: SDKTab[] = []; // List of tabs. See properties list below.

// Optional properties.
activeTab: SDKTab | undefined; // Set the current active tab. This is used to load a tab from a share.
fontFamily: string = ""; // Font to use for the tab titles.
fontColor: string = ""; // Color to use for the tab titles.
tabColor: string = ""; // Color of the tabs.
tabBorderColor: string = ""; // Border color of the tabs.
activeTabColor: string = ""; // Active tab color.
activeFontColor: string = ""; // Active tab font color.
height: string = ""; // Height of tabs. Default is auto.
share: boolean = false; // Enable share icon.
tabChangedEvent: EventEmitter<{ from: any, to: any }> = new EventEmitter(); // Callback when active tab changes.

SDKTab {
    title: string; // Name on the tab.
    type?: Type<any>; // The component to display when the tab is selected.
    inputs?: any; // Input properties for the component displayed.
    outputs?: any // Output properties for the component displayed.
    urlParams?: string // Parameters to be used when sharing the tab.
}

import { SDKTab } from 'sdk-tabs';

public tabs: SDKTab[] = [
    {
        title: "Introduction",
        type: <any>IntrodutionTabComponent,
        inputs: {
            "title": "Introducing TABS! The easiest way to organize your layout."
        },
        outputs: {}
    },
    {
        title: "The Basics",
        type: <any>TheBasicsTabComponent,
        inputs: {
            "title": "The Basics - A simple out-of-the-box design."
        },
        outputs: {},
        urlParams: "abc=123" // Set tab's url parameters explicitly
    },
    (() => {
        let tab: SDKTab = {
            title: "Advanced",
            type: <any>AdvancedTabComponent,
            inputs: {
                "title": "Advanced Options and Setup."
            },
            outputs: {},
            urlParams: ""
        };

        // Create a callback method to handle dynamic params.
        tab.outputs = {
            setUrlParamsEvent: (params: any) => {
                this.setUrlParams(tab, params);
            }
        };

        return tab;
    })()
];

public setUrlParams(tab: SDKTab, params: string) {
    let tmp: SDKTab[] = [...this.tabs];
    let ndx = tmp.findIndex((t: SDKTab)=> t.title === tab.title);

    if (ndx > -1) {
        tmp[ndx].urlParams = params;
    }

    this.tabs = [...tmp];
}

import { Component, EventEmitter, Output } from '@angular/core';

@Component({
    selector: 'advanced-tab',
    templateUrl: './advanced-tab.component.html',
    styleUrls: ['./advanced-tab.component.scss']
})

export class AdvancedTabComponent {
    @Output() setUrlParamsEvent: EventEmitter<string> = new EventEmitter();

    protected ngAfterViewInit() {
        this.setUrlParamsEvent.emit("abc=123&xyz=789");
    }
}