Angular material separate md-tabs body

Question

I'm using angular material ( https://material.angularjs.org/ )

Is there a way to separate a tabs body from the tab list? I couldn't find any mention of this in the documentation.

Currently I have something like this, I need to move md-tab-body outside of md-tabs . Preferably without use of states or controller show/hide logic.

<md-tabs>
<md-tab>
    <md-tab-label>First tab</md-tab-label>
    <md-tab-body>
        <p>First tabs content.</p>
    </md-tab-body>
</md-tab>
<md-tab>
    <md-tab-label>Second tab</md-tab-label>
    <md-tab-body>
        <p>Second tabs content.</p>
    </md-tab-body>
</md-tab>

Answer 1

This isn't currently possible, but there may be different solutions depending on your use-case.

Option 1

The md-tab-body is optional, so you can use md-tabs to only handle the tab bar, and manually handle your tab content elsewhere, bound to the same selected index used by md-tabs .

Option 2

A lot of people want this functionality so that the tab bar can be a part of md-toolbar . This can be achieved by putting the md-tabs element directly after the md-toolbar , as demonstrated here: http://codepen.io/robertmesserle/pen/LVxzNW