How to Make Angular Material Tabs as Wizard with ng-click? - angularjs

Question

I would like to Make <md-tab>s as Wizard by adding Next Button.
i added My code and created a Plunker with next Buttons Could guys take a look please add your code to make it wizard
Plunker Added :-
http://plnkr.co/edit/p9mMyaqqHWtVyAEeisd1?p=preview
<md-content class="md-padding">
<md-tabs md-dynamic-height="" md-border-bottom="">
<md-tab label="one">
<md-content class="md-padding">
<h1 class="md-display-2">Tab One</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus. In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec, feugiat ultricies mi.</p>
<md-button class="md-raised md-primary">Next</md-button>
</md-content>
</md-tab>
<md-tab label="two">
<md-content class="md-padding">
<h1 class="md-display-2">Tab Two</h1>
<p>Lorem risus, pulvinar at interdum quis, vehicula sed odio. Phasellus in enim venenatis, iaculis tortor eu, bibendum ante. Donec ac tellus dictum neque volutpat blandit. Praesent efficitur faucibus risus, ac auctor purus porttitor vitae. Phasellus ornare dui nec orci posuere, nec luctus mauris semper.</p>
<md-button class="md-raised md-primary">Next</md-button>
</md-content>
</md-tab>
<md-tab label="three">
<md-content class="md-padding">
<h1 class="md-display-2">Tab Three</h1>
<p>Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat, at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est. Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.</p>
<md-button class="md-raised md-primary">Finish</md-button>
</md-content>
</md-tab>
</md-tabs>

Answer 1

you have add an attribute to your md-tabs tag md-selected attribute to set the selected tab index ..
so first you have to add ng-controller
<md-content class="md-padding" ng-controller="tabCtrl">
after bind you have bind the value of selectedIndex
<md-tabs md-dynamic-height="" md-border-bottom="" md-selected="selectedIndex">
after you have to add ng-click to your button to call nextTab()
<md-button class="md-raised md-primary" ng-click="nextTab()">Next</md-button>
end of it ... here is the controller you need
// Code goes here
var moduler = angular.module('MyApp', ['ngMaterial']);
moduler.controller("tabCtrl", ['$scope', function($scope) {
$scope.max = 2;
$scope.selectedIndex = 0;
$scope.nextTab = function() {
var index = ($scope.selectedIndex == $scope.max) ? 0 : $scope.selectedIndex + 1;
$scope.selectedIndex = index;
};
}]);
i hope this example helps you...
here is the example at plunker as you wish
http://plnkr.co/edit/iNEXWXUBDvsrKgUSelkW?p=preview

Answer 2

you could use the Wizard also which serves your cause
github Link :-
https://github.com/Matesign/material-wizard
sample code follows
<mt-wizard btn-progress-color="#D8D8D8" btn-bg-color="#FAFAFA" active-btn-bg-color="#E9E9E9" chevrons-always-visible="true" on-finish="submit()">
<mt-wz-step title="Step 1" step-img="step1.svg" on-exit="onExitStep1()">
</mt-wz-step>
</mt-wizard>
http://plnkr.co/edit/rp5qJykW2DD1A7EvaVZP?p=preview