core/tabs/conditional-tabs-outlet.component.ts
Register this component on the parent route of a view with multiple tabs where the first tab is displayed only conditionally.
Given the following routes leading to a single view with multiple tabs:
/yourpath/tab-a -> Tab A
/yourpath/tab-b -> Tab B
/yourpath/tab-c -> Tab C
Your components will be registered like
export const routes: Route[] = [
{
path: 'yourpath/tab-a',
component: TabAComponent
},
{
path: 'yourpath/tab-b',
component: TabBComponent
},
{
path: 'yourpath/tab-c',
component: TabCComponent
}
];In the simple case where Tab A is the first tab on the view and it is always displayed, you can register your view in the navigation with a similar navigator node:
new NavigatorNode({
label: gettext('My tabs'),
path: 'yourpath/tab-a',
icon: 'gears',
parent: gettext('Some parent node'),
priority: 100
})This will navigate to the first tab's component and activate the first tab in the view.
In case Tab A is displayed conditionally you cannot link it from a navigator node since it may not be available in some cases.
In this situation ConditionalTabsOutletComponent comes handy as it will forward users to the first available tab on your view:
new NavigatorNode({
label: gettext('My tabs'),
path: 'yourpath', // note that here we use only the parent route
icon: 'gears',
parent: gettext('Some parent node'),
priority: 100
})
[...]
export const routes: Route[] = [
{
path: 'yourpath',
component: ConditionalTabsOutletComponent // we register ConditionalTabsOutletComponent for the parent path
},
{
path: 'yourpath/tab-a',
component: TabAComponent
},
{
path: 'yourpath/tab-b',
component: TabBComponent
},
{
path: 'yourpath/tab-c',
component: TabCComponent
}
];
| selector | c8y-conditional-tabs-outlet |
| template | |
Methods |
constructor(tabsService: TabsService, router: Router)
|
|||||||||
|
Parameters :
|
| ngOnDestroy |
ngOnDestroy()
|
|
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|