File

core/tabs/conditional-tabs-outlet.component.ts

Description

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
 *   }
 * ];
 *

Implements

OnInit OnDestroy

Metadata

selector c8y-conditional-tabs-outlet
template
<router-outlet></router-outlet>

Index

Methods

Constructor

constructor(tabsService: TabsService, router: Router)
Parameters :
Name Type Optional
tabsService TabsService No
router Router No

Methods

ngOnDestroy
ngOnDestroy()
Returns : void
ngOnInit
ngOnInit()
Returns : void

result-matching ""

    No results matching ""