Reusable Sub-Navigation Component

Import sharedModule in your module.
Create a route structure in routes.ts file inside ROUTESDATA object

Add new array in  ROUTESDATA, as below

  billing: [
    {
      type: 'view',
      URL: '/billing/passbook',
      fullPath: '/billing/passbook',
      scope: '',
      queryParams: passbook_param,
      name: 'Passbook',
      scopeLabel: 'passbook',
      visibileFor: ['all'],
      hiddenInWorkspace: [],
      showInLocation: [],
      showInMobile: false,
      hasAccess: false,
      requiredLocationSetting: [LOCATIONSETTINGLIST.WORKSPACE_CREATION],
      isVisible: true,
      urlType: 'WORKSPACE',
      parent: 'billing',
      sortKey: 1
    }
  ]

Add below block in your html component

// parent value should be same as array key in routes.ts
// showLocationList: If need to show switch location dropdown send as true else false
  
<!-- SUB NAVIGATION -->
  <app-sub-navigation-bb [showLocationList]="false" [parent]="'billing'" ></app-sub-navigation-bb>
<!-- SUB NAVIGATION -->

With above configuration below UI will be shown and on clicking user will be redirected to the URL defined in routes.ts file.

Software Development

Reusable Sub-Navigation Component

Related content