Components: Tabs + Routing

[jelbourn]

This captures using tabs (or a tab-like ui) with routing.

[apals]

Any ETA on this?

[naveedahmed1]

It would be really nice to have md-tabs linked with router.

[aminebizid]

You mean with async routing and a nice progress circle while getting data. Yeah it will be great.

[DennisSmolek]

So I was wondering why build the routing directly into the component? With so many routers out there (Core, Beta, UI, ngrx, ionic) wouldn't it be better to just have the tabs component emit events and allow the user to attach to it?

Instead of doing <md-tabs><md-tab [router-link]="['/whatever',"1234"]"></md-tab></md-tabs> you would do: <md-tabs><md-tab (tabNavigate)="doRouterAction(navData)"></md-tab> or even: (tabNavigate)="router.location(event)"

for progress you could do: [nav-progress]="getNavProgress()"

This way the tabs stay flexible for dev's to use the router of their choice..

you could even attach the event on just the main <md-tabs> and keep the rest clean...

[jelbourn]

It's just tabs that have a routing outlet in them and the "tabs" are anchors.

[DennisSmolek]

That's true, I wasn't thinking about the outlet being built in...

[kyleledbetter]

Probably obvious, but if tabs are used as a router (or regardless), it would be nice to conditionally not render the <div class="md-tab-body-wrapper">

https://github.com/angular/material2/blob/master/src/components/tabs/tab-group.html#L17-L25

[aminebizid]

@jelbourn you are ok for a PR implementing md-tab-routed or you prefer upgrade actual md-tab?

[jelbourn]

@robertmesserle is already working on this.

[beakid]

@jelbourn @robertmesserle Any updates? :)

EDIT: Hm, "robertmesserle was unassigned by beakid". Not sure that's what I wanted to do?

[vespertilian]

A bit like what @DennisSmolek discussed, I think it would be nice to be able to access the 'tab headers' separately from the tabs. So you could roll your own tabs with the excellent tab transition that angular materials gives you, using a vanilla router and outlet.

I imagine something like this.

<md-tab-group-manual>
  <!--tab headers-->
  <md-tab-headers>
    <md-tab-label>
      <a routerLink="/tabA">Tab A</a>
    </md-tab-label>
    <md-tab-label>
      <a routerLink="/tabB">Tab B</a>
    </md-tab-label>
  </md-tab-headers>
  <!--outlet container-->
  <md-tab-container>
    <router-outlet> </router-outlet>
  </md-tab-container>
</md-tab-group-manual>

I tried hack this together, pulling out the header component and labels by themselves. However I could not access sub-components like md-ink-bar as it is not exported, and it all just became too hard. I am going to just use Materials Light for now, but it would be great to use an Angular 2 specific version, so I thought I should share my experience here.

[mafav]

A bit of a hacky solution: use each md-tab as a button to change the routerlink from the component's typescript whilst having 'router-outlet' outside of the md-tab-group tag.

The HTML:

<md-tab-group (focusChange)="changeTab($event)">
            <md-tab>
                <template md-tab-label>
                    Test
                </template>
            </md-tab>
            <md-tab>
                    <template md-tab-label>
                        Material
                    </template>
                </md-tab>
                <md-tab>
                    <template md-tab-label>
                        Chat
                    </template>
                </md-tab>
            </md-tab-group>


 ...


     <router-outlet></router-outlet>

From the component (in my case, the navbar component):

    public changeTab(e) {
        console.log(e);
        switch (e.index) {
        case 0:
            this.router.navigateByUrl('/test');
            break;
        case 1:
            this.router.navigateByUrl('/material');
            break;
        case 2:
            this.router.navigateByUrl('/chat');
            break;

        default:
            console.log('e is: ', e, 'e.index is: ', e.index);
            break;
        }
    }

[andrewseguin]

A new nav component has been added which provides a tab header without tab content. This can be used in conjunction with a router outlet. Example provided in the tabs demo

[eagle-dan1349]

Seems like it still does not work. I've tried to use directives from example with latest version of material2, it does not work. I've tried to use code from example, it does not work. I downloaded and tried to run example app. It does not work.

[MaxiSantos]

@eagle-dan1349 yeah, I see the [active] property on the anchor with "md-tab-link" is complaining. Althought the new component looks is going well I'll go with @mafav approach.

[andrewseguin]

Please note that the nav bar is currently in master but not in the latest release.

[renevall]

@andrewseguin Is it on the latest release now?

[Toub]

@ReneVallecillo you can find an example here: https://github.com/angular/material2/tree/master/src/demo-app/tabs

[demiro]

OK, this is all good.... but the problem is the animation direction does not work. always goes forward, never backward

[JosuaMeier]

Changing [active]="rla.isActive" to [active]="rla.isActive ? true : null" fix the animation problem for me.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}