igxTabs and igxBottomNav should support router outlet

[kdinev]

Is your feature request related to a problem? Please describe.

When using an IgxTabs component or IgxBottomNav component, I want to load the content in the tabs according to the route that the user has gone to. Right now I can only have my components inside the tabs and bottom nav content and they are all loaded with the top-level component.

E.g. with tabs:

<igx-tabs>
    <igx-tabs-group>
      <ng-template igxTab>
        <div class="horizontal-center">
          <igx-icon>people_outline</igx-icon>
          <div class="igx-tabs__item-label">Team Details</div>
        </div> 
      </ng-template>

      <app-team-details [team]="team" [userId]="authUser?.SteamUser?.steamID64">
      </app-team-details>
    </igx-tabs-group>

    <igx-tabs-group *ngIf="userIsMember">
      <ng-template igxTab>
        <div class="horizontal-center">
          <igx-icon>playlist_add_check</igx-icon>
          <div class="igx-tabs__item-label">Team Strats</div>
        </div> 
      </ng-template>

      <app-team-strategies [isAdmin]="userIsAdmin" [isEditor]="userIsEditor">
      </app-team-strategies>
    </igx-tabs-group>
</igx-tabs>

E.g. with bottom nav:

<igx-bottom-nav>
  <igx-tab-panel label="Tab 1">
    <app-component1></app-component1>
  </igx-tab-panel>
  <igx-tab-panel label="Tab 2">
    <app-component2></app-component2>
  </igx-tab-panel>
  <igx-tab-panel label="Tab 3">
    <app-component3></app-component3>
  </igx-tab-panel>
</igx-bottom-nav>

Describe the solution you'd like

I would like the configuration to be something similar to:

E.g. tabs:

<igx-tabs>
    <igx-tabs-group [routerLink]="['/teams', 'details']">
      <div class="horizontal-center">
        <igx-icon>people_outline</igx-icon>
        <div class="igx-tabs__item-label">Team Details</div>
      </div> 
    </igx-tabs-group>

    <igx-tabs-group *ngIf="userIsMember"  [routerLink]="['/teams', 'strats']">
      <div class="horizontal-center">
        <igx-icon>playlist_add_check</igx-icon>
        <div class="igx-tabs__item-label">Team Strats</div>
      </div> 
    </igx-tabs-group>
</igx-tabs>
<div class="content">
  <router-outlet></router-outlet>
</div>

E.g. bottom-nav:

<div class="content">
  <router-outlet></router-outlet>
</div>
<igx-bottom-nav>
  <igx-tab-panel  [routerLink]="['/tabs, 1]">
    <igx-icon>playlist_add_check</igx-icon>
    <div>Tab 1</div>
  </igx-tab-panel>
  <igx-tab-panel [routerLink]="['/tabs, 2]">
    <igx-icon>playlist_add_check</igx-icon>
    <div>Tab 2</div>
  </igx-tab-panel>
  <igx-tab-panel [routerLink]="['/tabs, 3]">
    <igx-icon>playlist_add_check</igx-icon>
    <div>Tab 3</div>
  </igx-tab-panel>
</igx-bottom-nav>

Describe alternatives you've considered

The only way to do this currently is to have all my routes with arguments going to one component, which handling of the selected index based on the routing param. This would still load all the components together with the top-level component.

Additional context

The current implementation is not very developer friendly.

[kdinev]

I actually noticed that the IgxTabs support this already, so this is more applicable to the IgxBottomNav.

[corganfuzz]

@kdinev Could you share your solution with <router-outlet> and igx-tabs , it doesnt seem to work for me, at least in the latest version.

my router outlet is on app.component.html (regular router implementation): from infragistics documentation example

<igx-tabs>
     <igx-tabs-group *ngFor="let val of routerLinks">
          <ng-template igxTab>
            {{routerLink.label}}
            <a routerLink="{{routerLink.link}}"></a>
          </ng-template>
        </igx-tabs-group>
 </igx-tabs>

<router-outlet></router-outlet>

on the app.component.html I have (inside the constructor):

 this.routerLinks = [
      {
        index: 0,
        label: ops,
        link: '/ops',
      },
      {
        index: 1,
        label: 'pods',
        link: '/pods',
      },
      {
        index: 2,
        label: 'pads',
        link: '/pads',
      },
    ];

The above doesnt work, I thought it was my router implementation but If do:

 <ul>
        <li>
          <a [routerLink]="['/ops']" routerLinkActive="active">ops</a>
        </li>
        <li>
          <a [routerLink]="['/pods']" routerLinkActive="active">pods</a>
        </li>
        <li>
          <a [routerLink]="['/pads']" routerLinkActive="active">pads</a>
        </li>

</ul>
        <router-outlet></router-outlet>

works perfectly. (which just makes think I can use regular buttons or navbar really), but I like the effect of igx-tabs

How do it get the same using igx-tabs?...it seems <a routerLink="{{routerLink.link}}"></a> doesnt really emit a click or something.

[bkulov]

@corganfuzz, @kdinev We have a sample how to implement routing with igxTab:
https://www.infragistics.com/products/ignite-ui-angular/angular/components/tabs.html#using-tabs-and-routing

[corganfuzz]

@bkulov Thanks, that worked

[rmkrmk]

Here is a possible solution on how to load router links for IgxBottonNav control:

<div class="content">
  <router-outlet></router-outlet>
</div>

<igx-bottom-nav>
  <igx-tab-panel>
    <ng-template igxTab>
      <a routerLink='/view1'>Tab 1</a>
    </ng-template>
  </igx-tab-panel>
  <igx-tab-panel>
    <ng-template igxTab>
      <a routerLink='/view2'>Tab 2</a>
    </ng-template>
  </igx-tab-panel>
  <igx-tab-panel>
    <ng-template igxTab>
      <a routerLink='/view3'>Tab 3</a>
    </ng-template>
  </igx-tab-panel>
</igx-bottom-nav>

[corganfuzz]

Interesting. I couldnt make it to work with routerLink and ng-template. I’ve used the second example in the documentation with the switch statement i believe