Post (Angular) 6 - Tabs inside Angular

Ng-Click

This responses to user click on the tab and display the data that were bind.

Given the example like below , where we can use ng-click inside the page :

<div class="section">
        <ul class="nav nav-pills nav-sm">
          <li><a href ng-click="tab = 1">Personal Info</a></li>
          <li><a href ng-click="tab = 2">Career</a></li>
          <li><a href ng-click="tab = 3">Study</a></li>
        </ul>
       {{ tab }}
 </div>

From the example, when ng-click changes the value inside a tab. The {{ tab }} expression automatically get updated.

Now lets define our tab panel,

<div class="panel" ng-show="tab === 1">
     <h4> {{ product.name }} </h4>
     <p> {{ product.description }}</p>
 </div>
<div class="panel" ng-show="tab === 2">
     <h4> {{ product.name }} </h4>
     <p> {{ product.description }} </p>
</div>

Ng-Init

As you can see, our panel will be displayed if the correct number of tab is equal to value of ng-show. Product name and description will display accordingly. However , when we refresh the page none of the panel will show up. This comes ng-init property where we set initial tab section to be shown first to a corresponding panel.

<div class="section" ng-init="tab = 1" >
        <ul class="nav nav-pills nav-sm">
          <li><a href ng-click="tab = 1">Personal Info</a></li>
          <li><a href ng-click="tab = 2">Career</a></li>
          <li><a href ng-click="tab = 3">Study</a></li>
        </ul>
       {{ tab }}
 </div>

Ng-Class

Now that we learn to set initial value for a tab when the user comes at the first time to see our page. The first tab panel will be display to them . However, when user changing the tab. It is important to set the current active tab to easily track on their navigation.

<div class="section" ng-init="tab = 1" >
        <ul class="nav nav-pills nav-sm">
          <li ng-class= "{ active:tab === 1 }">
             <a href ng-click="tab = 1">Personal Info</a>
          </li>
          <li ng-class= "{ active:tab === 2 }">
             <a href ng-click="tab = 2">Career</a>
          </li>
          <li ng-class= "{ active:tab === 3}">
             <a href ng-click="tab = 3">Study</a>
          </li>
        </ul>
       {{ tab }}
 </div>

Create Controller Function(s)

To do a cleaner code we should set all controller things inside our controller. First, we can create a controller called "TabController" which we can compare the current active tab and set the value of tab that being changed.

app.controller('TabController', function(){
    this.tab = 1;
    
   // to set tab value and change the panel
    this.selectTab = function(setTab){
      this.tab = setTab;
    };
    
    // to check and set current active tab
    this.isSelectedSet = function(checkTab){
      return this.tab === checkTab;
    };
    
  });

And then in our page we can write it like this :

<div class="section" ng-controller = "TabController as panel">
        <ul class="nav nav-pills nav-sm">
          <li ng-class= "{ panel.isSelected(1) }">
             <a href ng-click="panel.selectTab(1)">Personal Info</a>
          </li>
          <li ng-class= "{ panel.isSelected(2) }">             <a href ng-click="panel.selectTab(2)">Career</a>          </li>
          <li ng-class= "{ panel.isSelected(3) ">             <a href ng-click="panel.selectTab(3)">Study</a>          </li>
        </ul>
       {{ tab }}
 </div>

References :

https://material.angularjs.org/latest/demo/tabs
http://campus.codeschool.com/courses/shaping-up-with-angularjs/level/2/section/2/tabs-inside-out