Angular material tabs custom HTML

Question

I am having issues with angular material tabs, i need to remove tabs on other side of html, not to wrap in entire html. Here is example with default tabs that is working ok

<md-content>
    <md-tabs md-dynamic-height md-border-bottom>
        <md-tab label="1">
            <md-content class="md-padding">1</md-content>
           </md-tab>
        <md-tab label="2">
            <md-content class="md-padding">2</md-content>
        </md-tab>
</md-tabs>
</md-content>

But i need to have something like this

<md-tabs md-dynamic-height md-border-bottom>
    <md-tab label="1">
    </md-tab>
    <md-tab label="2">
    </md-tab>
</md-tabs>


<div class="main">
    <md-content class="md-padding">1</md-content>
    <md-content class="md-padding">2</md-content>
</div>

I know there is option on

**md-on-select="" md-on-deselect=""**

But how to make it in my case?

Why do you need this can you explain? Can you provide a user story? — hurricane
– hurricane, Commented Oct 3, 2016 at 8:07
Because i need some custom element in html because of design — Miomir Dancevic
– Miomir Dancevic, Commented Oct 3, 2016 at 8:08

camden_kid · Accepted Answer · 2016-10-03 08:37:38Z

2

Here you go - CodePen

Link the md-selected attribute of the md-tabs with ng-switch on the main div.

Markup

<div ng-controller="AppCtrl as vm" ng-cloak="" ng-app="MyApp">
  <md-tabs md-dynamic-height md-border-bottom md-selected="vm.selectedIndex">
      <md-tab label="1">
      </md-tab>
      <md-tab label="2">
      </md-tab>
  </md-tabs>

  <div class="main" ng-switch="vm.selectedIndex">
      <md-content class="md-padding" ng-switch-when="0">1</md-content>
      <md-content class="md-padding" ng-switch-when="1">2</md-content>
  </div>
</div>

JS

angular.module('MyApp',['ngMaterial'])

.controller('AppCtrl', function() {
  this.selectedIndex = 0;
});

answered Oct 3, 2016 at 8:37

camden_kid

12.8k12 gold badges57 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular material tabs custom HTML

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related