Nebular: nb-route-tabset with parameters in URL

Created on 5 Feb 2018  路  3Comments  路  Source: akveo/nebular

Issue type

I'm submitting a ... (check one with "x")

  • [X] bug report
  • [X] feature request

Issue description

Current behavior:

When using nb-route-tabset, the parameters are never sent correctly because the URL we provide is considered as a simple string. Which means that when we arrive at the targeted component, we cannot fetch data by reading the route parameters.

Expected behavior:

Being able to use parameters in the URL. Probably asking for an array in the route property and navigate to it in the NbRouteTabsetComponent should be enough ?

Steps to reproduce:

Related code:

Have a Groups module with these routes :

const routes: Routes = [
  {
    path: 'groups',
    children: [
      {
        path: '',
        component: GroupListComponent,
      },
      {
        path: ':id',
        component: GroupComponent,
        children: [
          {
            path: '',
            redirectTo: 'detail',
            pathMatch: 'full',
          },
          {
            path: 'detail',
            component: GroupDetailComponent,
          },
          {
            path: 'edit',
            component: GroupEditComponent
          }
        ],
      },
    ],
  }
];

In the GroupComponent ( I tried different way to define the route):

  ngOnInit() {
    this.route.params.subscribe(
      params => {
        this.tabs = [
          {
            title: 'Detail',
            route: ['groups' + params['id'] + '/detail'],
          },
          {
            title: 'Edit',
            route: '/groups/' + params['id'] + '/edit'
          },
        ];
      }
    );
  }

with this template : <nb-route-tabset [tabs]="tabs"></nb-route-tabset>

In the GroupDetailComponent:

ngOnInit() {
    this.route.params.switchMap(
      params => this.groupService.getGroup(params['id'])
    ).subscribe(group => this.group = group);
  }

Other information:

npm, node, OS, Browser

<!--
Node, npm: `node --version` and `npm --version`
OS: Windows (7/8/10). Linux (incl. distribution). macOS (El Capitan? Sierra?)
Browser: Chrome/Safari/Firefox/etc?
-->

node: v8.9.4
npm: 5.6.0
OS: Ubuntu 1604
Browser: firefox

Angular, Nebular

<!--
Check your `package-lock.json` or locate a `package.json` in the `node_modules` folder.
-->
important bug enhancement theme

Most helpful comment

Hi guys! Fix planned on 3.2.0 release. Then you will be able to set route in any way supported by routerLink.

As a workaround, for now, you can provide dynamic values only via single strings. Like this:

this.route.params.subscribe(params => {
  this.tabs = [
    {
      title: 'Detail',
      route: `/groups/${params.id}/detail`,
    },
  ];
});

All 3 comments

Hi, any update on this?

Still nothing :(,

Hi guys! Fix planned on 3.2.0 release. Then you will be able to set route in any way supported by routerLink.

As a workaround, for now, you can provide dynamic values only via single strings. Like this:

this.route.params.subscribe(params => {
  this.tabs = [
    {
      title: 'Detail',
      route: `/groups/${params.id}/detail`,
    },
  ];
});
Was this page helpful?
0 / 5 - 0 ratings