Angular Router data based navigation and layout

[rapid flicker]

Hi. I would like to build navigation based on repetitive layout and tabs. By that I mean that I would like to have unified layout for my tabs that are easily replaceable.
I've build something but it does not work as expected. So my goal is to have each tab child on a separate route with route configuration like this or similar:

{
  path: 'machines',
  component: TabsLayoutComponent,
  data: {
    title: 'Machines',      // title in H1 element
    inNavigation: true,     // should it be visible in main navigation  
    navTitle: "Machines",   // title in the main menu
    tabs: [
      {
        label: 'Spaceships',                // Tab label title
        path: 'spaceships',                 // Tab path
        component: StarshipTableComponent   // Tab content
      },
      {
        label: 'Vehicles',                  // ...as above
        path: 'vehicles',
        component: VehicleComponent
      }
    ]
  }
}

I could do something like this with TabsLayoutComponent, but I've got issues with changing paths. Here is the stackblitz for the above exmaple:
https://stackblitz.com/edit/angular-v14-playground-asqqcc

[cunning escarp]

You have to define your children prop dynamically for your tab-one and tab-two.

[still stump]

There is no route that exists for any of the tabs, so it can not use the router.

Any reason you arent using https://material.angular.io/components/tabs/overview#tabs-and-navigation?

[rapid flicker]

@still stump but can I add children dynamically from the level of layout component? I want to use the same solution for stepper and maybe some other custom solution

[still stump]

You can, but not sure how that relates

[rapid flicker]

as Frontend-Dev suggested, I can do it dynamically

[still stump]

Well, you are trying to use routing, but the routes do not exist. Based on the stackblitz I dont see why you need to do it dynamically. Yes you can, but I can't see why you would need to.

but I've got issues with changing paths.

Paths dont change if the routes dont exist, is all I am trying to say.

[rapid flicker]

I've updated my example and it looks like this now:
https://stackblitz.com/edit/angular-v14-playground-okmkfn
but I get weird error now: ROR TypeError: el.setAttribute is not a function coming from the template

[burnt sentinel]

You may not put a routerLink on an ng-template. Set it on a link (<a>). And for your main navigation, BTW, you should also use links instead of buttons. The semantically correct element to use to navigate is a link, not a button. Material has a mat-tab-nav-bar for tabs used to navigate. Follow their example in the documentation.