Swipable tabs using angular material

Question

I want to build tabs which can be swiped by swipping on their content. To be specific, when I swipe right on a tab's content(body) I want the previous tab's content to be displayed. This is similar to what is available in Whatsapp to navigate between the three tabs: calls, chats and contacts.

I want to implement this using angular material module. I know about md-swipe-left and md-swipe-right. But how do I change the body of the tabs?? Any suggestions??

Answer 1

use md-selected attribute of md-tabs

HTML

<md-tabs class="md-accent" md-selected="selectedIndex" md-swipe-left="changeTab(1)" md-swipe-right="changeTab(0)">

Controller

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

Answer 2

This is the heart of the answer:

    $scope.onSwipeRight = function(tab_num){
        if( tab_num < 0){
            return;
        }
        $scope.selectedIndex = tab_num;   
    }

    $scope.onSwipeLeft = function(tab_num){
        if( tab_num > l){
        //l is number of tabs I have
            return;
        }
        $scope.selectedIndex = tab_num;        
    }

Then, use md-swipe-left="onSwipeLeft(selectedIndex+1)" and md-swipe-right="onSwipeRight(selectedIndex-1)" on the md-tabs directive.

That is all you need!!