Smart Tab Group

References

These packages must be updated in case of a new version:

• There are no references yet

How to use

Installation

Go to your project, open the terminal and use the following command:

npm i @smartbit4all/tab-group

Then import it in the AppModule:

app.module.ts:

import { SmartTabGroupModule } from '@smartbit4all/tab-group';
...
@NgModule({
    declarations: [...]
    imports: [
        ...
        SmartTabGroupModule,
    ],
    ...
})

Usage

example.component.html:

<smart-tab-group [tabTiles]="tabs!" [route]="route">
    <router-outlet></router-outlet>
</smart-tab-group>

example.component.ts:

export class ExampleComponent {
    tabs?: TabTile[];

    constructor(public route: ActivatedRoute) {
        this.setTabs();
    }

    setTabs(): void {
        this.tabs = [
            {
                tileName: 'Tab 1',
                url: '../tab_1',
                uuid: ''
            },
            {
                tileName: 'Tab 2',
                url: '../tab_2',
                uuid: ''
            }
        ];
    }
}

app-routing.module.ts:

const routes: Routes = [
    {
        path: '',
        component: ExampleComponent,
        children: [
            {
                path: 'tab_1',
                component: ExampleTab1Component
            },
            {
                path: 'tab_2',
                component: ExampleTab2Component
            }
        ]
    },
]

Version logs

@smartbit4all/form v1.0.5

This update contains 2 major change:

• TabTile model from now has an extra property for display additional data on the tab label
• selectedTabChanged Subject added to component

keep it mind, this version uses the SmartNavigationService instead of the CompnentFactoryService!!!

@smartbit4all/form v1.0.1

Type: Update

The package has been published.

@smartbit4all/tab-group v0.1.1

Type: Feature

This version of the SmartTabGroup uses the SmartNavigationService package.

In order to use this package make sure that the proper version of the @smartbit4all/navigation is installed.

Changes in the usage:

There are two versions for setting up a SmartTabGroup. In versionA the url gets a '../' prefix which helps the relative navigation. However, in some cases it simply does not work. In that case get rid of the prefix mentioned before, and set the url as it is shown in versionB.

let versionA = [
    {
        tileName: 'Tab 1',
        url: '../tab_1',
        uuid: ''
    }
];

let versionB = [
    {
        tileName: 'Tab 1',
        url: 'tab_1',
        uuid: ''
    }
];

@smartbit4all/tab-group v0.0.2

Type: Bugfix

The query parameters dissappeared from the url on navigating to a new tab.

The code snippet that has been replaced:

this.router.navigateByUrl(this.actualPath + "/" + this.tabTiles[$event.index].url);

The new code snippet which has solved the issue:

this.router.navigate(
    [this.actualPath, this.tabTiles[$event.index].url],
    {
        queryParamsHandling: "preserve",
    });

@smartbit4all/tab-group v0.0.1

Type: Feature

The basic smart tab group with its features.