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
|