Angular Material Tabs - Manual navigation from ng-click inside tab content

Question

We are using angular material tabs on our login screen, with three tabs total, login, singup and forgot password.

Is it possible to add a clickable element inside the tab content to navigate through these tabs.

Looking in inspector view the md-tab-item has

ng-click="$mdTabsCtrl.select(tab.getIndex())"

But adding that to an element inside the tab content doesn't trigger any events.

<span ng-click="$mdTabsCtrl.select(tab.getIndex())">Forgot Password</span>

The reason for this is to make it easier for people to get to the forgot password screen if they are on mobile and the tab labels are not fully visible.

jon64digital · Accepted Answer · 2016-08-19 22:48:28Z

4

The documentation says that the md-selected attribute selects the tab.

<md-tabs md-selected="selectedIndex">

So have you tried setting $scope.selectedIndex to an integer in your controller to select the tab by index number?

You'll need to call a function on your controller to do this. E.g.

<span ng-click="changeTab(3)">Forgot Password</span>

Then in your controller...

$scope.changeTab = function(index){
    $scope.selectedIndex = index;
}

answered Aug 19, 2016 at 22:48

jon64digital

563 bronze badges

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

Comments

I think I can code · Accepted Answer · 2016-08-20 04:31:00Z

0

jon64digital has the right idea. On the md-tabs element you would place the md-selected attribute at tie it to an index from your scope. Then write a function to change the index.

<md-tabs md-selected="selectedIndex">
...

Here is a codepen on how this could work.

answered Aug 20, 2016 at 4:31

I think I can code

6471 gold badge6 silver badges18 bronze badges

Collectives™ on Stack Overflow

Angular Material Tabs - Manual navigation from ng-click inside tab content

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related