LIDOR SYSTEMS

Advanced User Interface Controls and Components

Add or Remove Tabs in TabStrip for AngularJS

Created: 01 December 2015

The simplest way to add tabs to the TabStrip directive for AngularJS, is by using HTML. However, this only works when you know what content the page will have. In some cases, when you need to add custom content, you may need add or remove tabs dynamically on run-time. In this article, you will learn how to create and add tabs to tabstrip directive from code, using several different methods and events.

Similar: TabStrip Component for Angular 2

{{tab.name}} Content
TabStrip directive is part of IntegralUI Studio for Web
a suite of UI Components for development of web apps





By clicking on buttons from control panel in our demonstration above, you can add or remove new tabs in AngularJS TabStrip. Each button performs a different action explained below.

Add a Tab to AngularJS TabStrip

At first, we need to set an array object that will hold all tabs. We define this object in application scope so that it can be used by tabstrip directive, using the pages attribute that links the specified object with the one used by the tabstrip.

Note Because of two-way data binding, any change to this object in application scope is reflected to the tabstrip directive, and vice versa.

angular

.module("appModule", ["integralui"])

.controller("appCtrl", ["$scope", "IntegralUITabStripService", "$timeout", function($scope, $ctrlService, $timeout){

// A unique identifer for the TabStrip

$scope.ctrlName = "ctrlSample";

 

// An object that holds all tabs

$scope.tabs = [

{ id: 1, name: 'Tab1', text: 'Tab 1' },

{ id: 2, name: 'Tab2', text: 'Tab 2' },

{ id: 3, name: 'Tab3', text: 'Tab 3' }

];

}]);

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="css/integralui.tabstrip.css" />

<link rel="stylesheet" href="css/themes/theme-flat-blue.css" />

<script type="text/javascript" src="external/angular.min.js"></script>

<script type="text/javascript" src="js/angular.integralui.min.js"></script>

<script type="text/javascript" src="js/angular.integralui.tabstrip.min.js"></script>

</head>

<body>

<div ng-app="appModule" ng-controller="appCtrl">

<iui-tabstrip name="{{ctrlName}}" class="directive" tabs="tabs" events="ctrlEvents" show-close-button="false">

<iui-tab ng-repeat="tab in tabs" name="{{tab.name}}" heading="{{tab.text}}">

<div class="tab-content">

{{tab.name}} Content

</div>

</iui-tab>

</iui-tabstrip>

</div>

</body>

</html>

TabStrip directive comes with a service that allows you to call different methods from code and modify the behavior of the directive dynamically. For adding a new tab we will use the addTab method.

var tabCount = $scope.tabs.length;

 

// Create a new tab

var createNewTab = function(){

tabCount++;

return { id: tabCount, name: "Tab" + tabCount, text: "Tab " + tabCount };

}

 

// Add a new tab to the tabstrip

$ctrlService.addTab($scope.ctrlName, createNewTab());

Note You may notice that we are using a ctrlName as first argument in addTab method. This is used to identify the tabstrip to which the new tab will be added. It is required for using the methods of IntegralUITabStripService, and useful to distinguish a specific tabstrip for others on the same page.

Insert a Tab at Specific Position in AngularJS TabStrip

The addTab method is useful mostly when you want to add a new tab at the end of the tabstrip. In most cases, you would need to place a tab at specific position, above or below other tabs. For this purpose, you can use one of the following methods:

For example, to add a tab after currently selected tab, we will use the following code:

// Returns the tab that is currently selected

var getCurrentSelection = function(){

return $ctrlService.selectedTab($scope.ctrlName);

}

 

// Insert a new tab to the tabstrip after currently selected tab

$ctrlService.insertTabAfter($scope.ctrlName, createNewTab(), getCurrentSelection());

Whenever a new tab is added using any of above methods, the tabAdding and tabAdded events are fired. You can handle these events in your code and set specific conditions or add a new operation suitable for your application.

Remove a Tab from AngularJS TabStrip

You can also remove a tab from the tabstrip dynamically from code. There are few different methods used to remove a tab or delete all tabs from the tabstrip:

  • removeTab - Removes a specified tab from the TabStrip
  • removeTabAt - Removes a tab which is located at specified index
  • clearTabs - Removes all tabs from the TabStrip

In following example, the tab at first position is removed from the tabstrip:

// Remove the tab at first position from the tabstrip

$ctrlService.removeTabAt($scope.ctrlName, 0);

During tab removal, the tabRemoving and tabRemoved events are fired. You can handle these events in your code to add custom functionality. When all tabs are removed using the clearTabs method, the clear event is fired.

Conclusion

Adding tabs to the IntegralUI TabStrip directive for AngularJS, can be done using only HTML or using built-in methods, dynamically from code. Depending on operation, a corresponding event is fired, which when handled can further enhance the functionality of the tabstrip directive.

Did you Like this Article?


Enter your e-mail address below and you will receive latest articles as well as news on upcoming events and special offers.