I can't figure out (from the example) how to specify the route/:id of the newly created tab.

If you altered the example so that the routing was happening on tabs-sample-4.component and populating details.component (with that close tab button populating on the same), it would put me in a much better state for it.

I'm not seeing anything in the API defining an igx-tab-item with anything more than a "disabled" property and an "active" accessor. I'm trying to figure out how to programmatically construct the tabs with the data that I need in it.

I'm having an issue with implementation as specified in the example:

    Error: src/app/components/nav/nav.component.ts:24:38 - error TS7053: Element implicitly has an 'any' type because  expression of type '"url"' can't be used to index type 'Event'.
    Property 'url' does not exist on type 'Event'.
    24 .subscribe(args => this.path = args['url']); //console.log(args));

The error occurs in the following snippet (you provided):

    this.router.events
      .pipe(filter(e => e instanceof NavigationEnd))
      .subscribe(args => this.path = args['url']); //console.log(args));

As you can see, I've tested with a console.log and confirmed the attribute "url" exists. How do I remove this error?

EDIT:

After some (strange) search results and some obscure search terms, I found a solution that actually works in my case (no idea why original didn't work for me):

    this.router.events
      .pipe(filter((e): e is NavigationEnd => e instanceof NavigationEnd))
      .subscribe(args => this.path = args.url);

I tried a lot of different variations before I found this one that actually works. Just have to designate that 'e' is a NavigationEnd object to get the "url" attribute from it.

Ok, so my next subject of concern is that I have a nav component where the existing tabs are created/held as you've done in the example, and the processes for adding/removing tabs are going to be in 2 separate locations from that nav component. I'm not sure how to accomplish this.

The ScenarioList component will hold the list of scenarios to navigate to (with navigation floating above it in a separate component). Clicking a button in that list should navigate to the Details component for that scenario (using the ID in the parameterized route). The Details component should publish a button to close that tab (by the id used in routing).

Again, my first thought here is using a global Tabs object (using a list of exported interface tab) using a similar structure to what you've implemented. I just need to know how to tie it all together across the 3 components (populating tabs from ScenarioList, removing tabs from Details/:id, displaying tabs in nav.component). The tab.name should be the scenario name, the tab.id should be the scenario id (stringified SQL Uniqueidentifier), and not sure what the text attribute is meant to represent as the tab.content would be the Details/:id generated content.

I'll figure out reuse strategies once this is working for me. Thanks for the references, there.