Web SDK documentation
  1. Components
  2. ConditionalTabsOutletComponent

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

Example :
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:

Example :
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:

Example :
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

results matching ""

    No results matching ""