AngularJs : Implement a view with tabs

Tab is a mostly used feature in webpages nowadays. It helps to keep the separation of content and user to view the different content without refreshing page.

This tutorial explains how to make a webpage with tabs using AngularJs as following example

Angular material, an UI Component framework for AngularJs is used in above example. So before go in to that lets make a web page with AngularJs fundamentals and after that we can use the Angular Material for a good look.
Here is the example of tabs using AngularJs fundamentals with the code.

Lets see what we have done

In JavaScript code we have two methods with an array(tabs) and string variable (currentTab), attached to the scope of TabsCtrl controller.

    angular.module('TabsApp', [])
    .controller('TabsCtrl', ['$scope', function ($scope) {
    $scope.currentTab="One";
    
    $scope.tabs = [{
            title: 'One'          
        }, {
            title: 'Two'           
        }, {
            title: 'Three'
        }
     ];

    //$scope.currentTab = $scope.tabs[0].title ;

    $scope.onClickTab = function (tab) {
        $scope.currentTab = tab.title;
    }
    
    $scope.isActiveTab = function(tabTitle) {
        return tabTitle == $scope.currentTab;
    }   
}]);

1. onClickTab method takes object as input and set title attribute of that object as the currentTab
2. isActiveTab method takes and string as input. Then return true if it equals to currentTab and return false otherwise

<ul>
            <li ng-repeat="tab in tabs" 
                ng-class="{active:isActiveTab(tab.title)}" 
                ng-click="onClickTab(tab)">{{tab.title}}</li>
        </ul>

Angular directives are used in the HTML code and lets see what do they do.

1. ng-repeat will go through all the elements in tabs array and repeat <li>elements
2. ng-class will apply class active if the isActiveTab method returns true
3. ng-click will execute onClickTab method when clicked on <li>element

<div ng-show="isActiveTab('One')">
</div>

ng-show will display div elements only if isActiveTab method will return true.
 Here is the link for more tab implementations using Angular materials.