Advanced User Interface Controls and Components
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
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.
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.
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.
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:
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.
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.