ejTab

The Tab control is an interface where list of items are expanded from a single item. Each Tab panel defines its header text or header template, as well as a content template. Tab items are dynamically added and removed. Tabs can be loaded with AJAX content that is useful for building dashboards where space is limited.

Example

  • html
  • <ej-tab id="tab">
        <ul>
            <li><a href="#twitter">Twitter</a></li>
            <li><a href="#facebook">Facebook</a></li>
            <li><a href="#whatsapp">WhatsApp</a></li>
        </ul>
        <div id="twitter">
            Twitter is an online social networking service that enables users to send and read short 140-character messages called "tweets".
            Registered users can read and post tweets, but those who are unregistered can only read them. Users access Twitter through the website interface, SMS or mobile device app Twitter Inc. is based in San Francisco and has more than 25 offices around the world.
            Twitter was created in March 2006 by Jack Dorsey, Evan Williams, Biz Stone, and Noah Glass and launched in July 2006. The service rapidly gained worldwide popularity, with more than 100 million users posting 340 million tweets a day in 2012.The service also handled 1.6 billion search queries per day.
        </div>
        <div id="facebook">
            Facebook is an online social networking service headquartered in Menlo Park, California. Its website was launched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students Eduardo Saverin, Andrew McCollum, Dustin Moskovitz and Chris Hughes.The founders had initially limited the website's membership to Harvard students, but later expanded it to colleges in the Boston area, the Ivy League, and Stanford University. It gradually added support for students at various other universities and later to high-school students.
        </div>
        <div id="whatsapp">
            WhatsApp Messenger is a proprietary cross-platform instant messaging client for smart phones that operates under a subscription business model. It uses the Internet to send text messages, images, video, user location and audio media messages to other users using standard cellular mobile numbers.
            As of February 2016, WhatsApp had a user base of up to one billion,[10] making it the most globally popular messaging application.
            WhatsApp Inc., based in Mountain View, California, was acquired by Facebook Inc. on February 19, 2014, for approximately US$19.3 billion.
        </div>
    </ej-tab>

    Requires

    • module:jQuery

    • module:jquery.easing.1.3.min.js

    • module:ej.core.js

    • module:ej.tab.js

    Members

    ajaxSettings object

    Specifies the ajaxSettings option to load the content to the Tab control.

    Example

  • html
  • <div id="dish" style="width: 650px">
    <ej-tab id="dishtype">
        <ul>
            <li><a href="#pizza">Pizza Menu</a></li>
            <li><a href="#sandwich">Sandwich Menu</a></li>
        </ul>
        <div id="pizza" style="background-color: #F5F5F5">
            <p>Pizza cooked to perfection tossed with milk, vegetables, potatoes, poultry, 100% pure mutton, and cheese - and in creating nutritious and tasty meals to maintain good health.</p>
            <div id="pizza">
            <ej-tab id="pizza" [ajaxSettings.dataType]="dataType" [ajaxSettings.contentType]="contentType" [ajaxSettings.async]="async" [ajaxSettings.data]="data" [ajaxSettings.type]="type" [ajaxSettings.cache]="cache">
                <ul>
                    <li>
                        <a href="content/cornSpinach.html">Corn & Spinach </a></li>
                    <li>
                        <a href="Content/chickenDelite.html">Chicken Delite </a></li>
                </ul>
            </ej-tab>
            </div>
        </div>
        <div id="sandwich" style="background-color: #F5F5F5">
            <p>Sandwich cooked to perfection tossed with bread, milk, vegetables, potatoes, poultry, 100% pure mutton, and cheese - and in creating nutritious and tasty meals to maintain good health.</p>
            <div id="sandwich">
            <ej-tab id="sandwich" [ajaxSettings.dataType]="dataType" [ajaxSettings.contentType]="contentType" [ajaxSettings.async]="async" [ajaxSettings.data]="data" [ajaxSettings.type]="type" [ajaxSettings.cache]="cache">
                <ul>
                    <li>
                        <a href="Content/gardenVeggie.html">Garden Veggie </a></li>
                    <li>
                        <a href="Content/chickenTikka.html">Chicken Tikka </a></li>
                    <li>
                        <a href="Content/paneerTikka.html">Paneer Tikka </a></li>
                </ul>
                </ej-tab>
            </div>
        </div>
        </ej-tab>
    </div>
  • ts
  • import { Component } from '@angular/core';
    import { ViewEncapsulation } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './tab.component.html',
        styleUrls: ['./tab.component.css'],
        encapsulation: ViewEncapsulation.None,
    })
    export class ScrollTabComponent {
        dataType: any;
    
    contentType: any;
    
    async: any;
        cache: any;
        data: Object;
        type: any;
        constructor() {
            this.cache= false;
            this.data= {};
            this.type= 'GET';
        
    this.dataType= "html";
    
    
    this.contentType= "html";
    
    
    this.async= true;
        }
    }

    The file ‘cornSpinach.html’ content is as follows.

  • html
  • <div class="e-content">
            <img src="http://js.syncfusion.com/demos/web/images/accordion/corn-and-spinach-05.png" alt="corn-spinach"/>
            <div class="ingredients">
                Rate    : $70<br />
                Ingredients : cheese, sweet corn &amp; green capsicums.
                    <br />
                Description: Small pizza bases are topped with spinach and Paneer and fresh cream, a nice layer of mozzarella cheese. This is baked until the cheese is all hot and gooey.                   
            </div>
        </div>

    The file ‘chickenDelite.html’ content is as follows.

  • html
  • <div class="e-content">
            <img src="http://js.syncfusion.com/demos/web/images/accordion/chicken-delite.png" alt="chicken-delite"/>
            <div class="ingredients">
                Rate    : $100<br />
                Ingredients : cheese, chicken chunks, onions &amp; pineapple chunks.  
                <br />
                Description: This is a tasty, elegant chicken dish that is easy to prepare.
            </div>
        </div>

    ajaxSettings.async boolean

    It specifies, whether to enable or disable asynchronous request.

    Default Value

    • true

    ajaxSettings.cache boolean

    It specifies the page will be cached in the web browser.

    Default Value

    • false

    ajaxSettings.contentType string

    It specifies the type of data is send in the query string.

    Default Value

    • “html”

    ajaxSettings.data object

    It specifies the data as an object, will be passed in the query string.

    Default Value

    • {}

    ajaxSettings.dataType string

    It specifies the type of data that you’re expecting back from the response.

    Default Value

    • “html”

    ajaxSettings.type string

    It specifies the HTTP request type.

    Default Value

    • “get”

    allowKeyboardNavigation boolean

    Tab items interaction with keyboard keys, like headers active navigation.

    Default Value

    • true

    Example

  • html
  • <ej-tab id="tab" [allowKeyboardNavigation]=true>
        <ul>
            <li><a href="#twitter">Twitter</a></li>
            <li><a href="#facebook">Facebook</a></li>
            <li><a href="#whatsapp">WhatsApp</a></li>
        </ul>
        <div id="twitter">
            Twitter is an online social networking service that enables users to send and read short 140-character messages called "tweets".
            Registered users can read and post tweets, but those who are unregistered can only read them. Users access Twitter through the website interface, SMS or mobile device app Twitter Inc. is based in San Francisco and has more than 25 offices around the world.
            Twitter was created in March 2006 by Jack Dorsey, Evan Williams, Biz Stone, and Noah Glass and launched in July 2006. The service rapidly gained worldwide popularity, with more than 100 million users posting 340 million tweets a day in 2012.The service also handled 1.6 billion search queries per day.
        </div>
        <div id="facebook">
            Facebook is an online social networking service headquartered in Menlo Park, California. Its website was launched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students Eduardo Saverin, Andrew McCollum, Dustin Moskovitz and Chris Hughes.The founders had initially limited the website's membership to Harvard students, but later expanded it to colleges in the Boston area, the Ivy League, and Stanford University. It gradually added support for students at various other universities and later to high-school students.
        </div>
        <div id="whatsapp">
            WhatsApp Messenger is a proprietary cross-platform instant messaging client for smart phones that operates under a subscription business model. It uses the Internet to send text messages, images, video, user location and audio media messages to other users using standard cellular mobile numbers.
            As of February 2016, WhatsApp had a user base of up to one billion,[10] making it the most globally popular messaging application.
            WhatsApp Inc., based in Mountain View, California, was acquired by Facebook Inc. on February 19, 2014, for approximately US$19.3 billion.
        </div>
    </ej-tab>
  • ts
  • import { Component } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html'
    })
    export class DefaultComponent {
        
        constructor() {
           
        }
    }

    collapsible boolean

    Allow to collapsing the active item, while click on the active header.

    Default Value

    • false

    Example

  • html
  • <ej-tab id="tab" [collapsible]=true>
        <ul>
            <li><a href="#twitter">Twitter</a></li>
            <li><a href="#facebook">Facebook</a></li>
            <li><a href="#whatsapp">WhatsApp</a></li>
        </ul>
        <div id="twitter">
            Twitter is an online social networking service that enables users to send and read short 140-character messages called "tweets".
            Registered users can read and post tweets, but those who are unregistered can only read them. Users access Twitter through the website interface, SMS or mobile device app Twitter Inc. is based in San Francisco and has more than 25 offices around the world.
            Twitter was created in March 2006 by Jack Dorsey, Evan Williams, Biz Stone, and Noah Glass and launched in July 2006. The service rapidly gained worldwide popularity, with more than 100 million users posting 340 million tweets a day in 2012.The service also handled 1.6 billion search queries per day.
        </div>
        <div id="facebook">
            Facebook is an online social networking service headquartered in Menlo Park, California. Its website was launched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students Eduardo Saverin, Andrew McCollum, Dustin Moskovitz and Chris Hughes.The founders had initially limited the website's membership to Harvard students, but later expanded it to colleges in the Boston area, the Ivy League, and Stanford University. It gradually added support for students at various other universities and later to high-school students.
        </div>
        <div id="whatsapp">
            WhatsApp Messenger is a proprietary cross-platform instant messaging client for smart phones that operates under a subscription business model. It uses the Internet to send text messages, images, video, user location and audio media messages to other users using standard cellular mobile numbers.
            As of February 2016, WhatsApp had a user base of up to one billion,[10] making it the most globally popular messaging application.
            WhatsApp Inc., based in Mountain View, California, was acquired by Facebook Inc. on February 19, 2014, for approximately US$19.3 billion.
        </div>
    </ej-tab>
  • ts
  • import { Component } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html'
    })
    export class DefaultComponent {
        
        constructor() {
           
        }
    }

    cssClass string

    Set the root class for Tab theme. This cssClass API helps to use custom skinning option for Tab control.

    Default Value

    • ””

    Example

  • html
  • <ej-tab id="tab" cssClass="cssClass">
        <ul>
            <li><a href="#twitter">Twitter</a></li>
            <li><a href="#facebook">Facebook</a></li>
            <li><a href="#whatsapp">WhatsApp</a></li>
        </ul>
        <div id="twitter">
            Twitter is an online social networking service that enables users to send and read short 140-character messages called "tweets".
            Registered users can read and post tweets, but those who are unregistered can only read them. Users access Twitter through the website interface, SMS or mobile device app Twitter Inc. is based in San Francisco and has more than 25 offices around the world.
            Twitter was created in March 2006 by Jack Dorsey, Evan Williams, Biz Stone, and Noah Glass and launched in July 2006. The service rapidly gained worldwide popularity, with more than 100 million users posting 340 million tweets a day in 2012.The service also handled 1.6 billion search queries per day.
        </div>
        <div id="facebook">
            Facebook is an online social networking service headquartered in Menlo Park, California. Its website was launched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students Eduardo Saverin, Andrew McCollum, Dustin Moskovitz and Chris Hughes.The founders had initially limited the website's membership to Harvard students, but later expanded it to colleges in the Boston area, the Ivy League, and Stanford University. It gradually added support for students at various other universities and later to high-school students.
        </div>
        <div id="whatsapp">
            WhatsApp Messenger is a proprietary cross-platform instant messaging client for smart phones that operates under a subscription business model. It uses the Internet to send text messages, images, video, user location and audio media messages to other users using standard cellular mobile numbers.
            As of February 2016, WhatsApp had a user base of up to one billion,[10] making it the most globally popular messaging application.
            WhatsApp Inc., based in Mountain View, California, was acquired by Facebook Inc. on February 19, 2014, for approximately US$19.3 billion.
        </div>
    </ej-tab>
  • ts
  • import { Component } from '@angular/core';
    import {ViewEncapsulation} from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html',
        styleUrls: ['./tab.component.css'],
        encapsulation: ViewEncapsulation.None,
    })
    export class DefaultComponent {
        
        constructor() {
           
        }
    }

    The css must be defined in stylesheet.

  • ts
  • <style>
    .cssClass{
        font-size: 20px;
    }
    </style>

    disabledItemIndex number[]

    Disables the given tab headers and content panels.

    Default Value

    • []

    Example

  • html
  • <ej-tab id="tab" [disabledItemIndex]="disabledItemIndex">
        <ul>
            <li><a href="#twitter">Twitter</a></li>
            <li><a href="#facebook">Facebook</a></li>
            <li><a href="#whatsapp">WhatsApp</a></li>
        </ul>
        <div id="twitter">
            Twitter is an online social networking service that enables users to send and read short 140-character messages called "tweets".
            Registered users can read and post tweets, but those who are unregistered can only read them. Users access Twitter through the website interface, SMS or mobile device app Twitter Inc. is based in San Francisco and has more than 25 offices around the world.
            Twitter was created in March 2006 by Jack Dorsey, Evan Williams, Biz Stone, and Noah Glass and launched in July 2006. The service rapidly gained worldwide popularity, with more than 100 million users posting 340 million tweets a day in 2012.The service also handled 1.6 billion search queries per day.
        </div>
        <div id="facebook">
            Facebook is an online social networking service headquartered in Menlo Park, California. Its website was launched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students Eduardo Saverin, Andrew McCollum, Dustin Moskovitz and Chris Hughes.The founders had initially limited the website's membership to Harvard students, but later expanded it to colleges in the Boston area, the Ivy League, and Stanford University. It gradually added support for students at various other universities and later to high-school students.
        </div>
        <div id="whatsapp">
            WhatsApp Messenger is a proprietary cross-platform instant messaging client for smart phones that operates under a subscription business model. It uses the Internet to send text messages, images, video, user location and audio media messages to other users using standard cellular mobile numbers.
            As of February 2016, WhatsApp had a user base of up to one billion,[10] making it the most globally popular messaging application.
            WhatsApp Inc., based in Mountain View, California, was acquired by Facebook Inc. on February 19, 2014, for approximately US$19.3 billion.
        </div>
    </ej-tab>
  • ts
  • import { Component } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html'
    })
    export class DefaultComponent {
        disabledItemIndex: array;
        constructor() {
           this.disabledItemIndex = [1,2];
        }
    }

    enableAnimation boolean

    Specifies the animation behavior of the tab.

    Default Value

    • true

    Example

  • html
  • <ej-tab id="tab" [enableAnimation]=true>
        <ul>
            <li><a href="#twitter">Twitter</a></li>
            <li><a href="#facebook">Facebook</a></li>
            <li><a href="#whatsapp">WhatsApp</a></li>
        </ul>
        <div id="twitter">
            Twitter is an online social networking service that enables users to send and read short 140-character messages called "tweets".
            Registered users can read and post tweets, but those who are unregistered can only read them. Users access Twitter through the website interface, SMS or mobile device app Twitter Inc. is based in San Francisco and has more than 25 offices around the world.
            Twitter was created in March 2006 by Jack Dorsey, Evan Williams, Biz Stone, and Noah Glass and launched in July 2006. The service rapidly gained worldwide popularity, with more than 100 million users posting 340 million tweets a day in 2012.The service also handled 1.6 billion search queries per day.
        </div>
        <div id="facebook">
            Facebook is an online social networking service headquartered in Menlo Park, California. Its website was launched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students Eduardo Saverin, Andrew McCollum, Dustin Moskovitz and Chris Hughes.The founders had initially limited the website's membership to Harvard students, but later expanded it to colleges in the Boston area, the Ivy League, and Stanford University. It gradually added support for students at various other universities and later to high-school students.
        </div>
        <div id="whatsapp">
            WhatsApp Messenger is a proprietary cross-platform instant messaging client for smart phones that operates under a subscription business model. It uses the Internet to send text messages, images, video, user location and audio media messages to other users using standard cellular mobile numbers.
            As of February 2016, WhatsApp had a user base of up to one billion,[10] making it the most globally popular messaging application.
            WhatsApp Inc., based in Mountain View, California, was acquired by Facebook Inc. on February 19, 2014, for approximately US$19.3 billion.
        </div>
    </ej-tab>
  • ts
  • import { Component } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html'
    })
    export class DefaultComponent {
        
        constructor() {
           
        }
    }

    enabled boolean

    When this property is set to false, it disables the tab control.

    Default Value

    • true

    Example

  • html
  • <ej-tab id="tab" [enabled]=true>
        <ul>
            <li><a href="#twitter">Twitter</a></li>
            <li><a href="#facebook">Facebook</a></li>
            <li><a href="#whatsapp">WhatsApp</a></li>
        </ul>
        <div id="twitter">
            Twitter is an online social networking service that enables users to send and read short 140-character messages called "tweets".
            Registered users can read and post tweets, but those who are unregistered can only read them. Users access Twitter through the website interface, SMS or mobile device app Twitter Inc. is based in San Francisco and has more than 25 offices around the world.
            Twitter was created in March 2006 by Jack Dorsey, Evan Williams, Biz Stone, and Noah Glass and launched in July 2006. The service rapidly gained worldwide popularity, with more than 100 million users posting 340 million tweets a day in 2012.The service also handled 1.6 billion search queries per day.
        </div>
        <div id="facebook">
            Facebook is an online social networking service headquartered in Menlo Park, California. Its website was launched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students Eduardo Saverin, Andrew McCollum, Dustin Moskovitz and Chris Hughes.The founders had initially limited the website's membership to Harvard students, but later expanded it to colleges in the Boston area, the Ivy League, and Stanford University. It gradually added support for students at various other universities and later to high-school students.
        </div>
        <div id="whatsapp">
            WhatsApp Messenger is a proprietary cross-platform instant messaging client for smart phones that operates under a subscription business model. It uses the Internet to send text messages, images, video, user location and audio media messages to other users using standard cellular mobile numbers.
            As of February 2016, WhatsApp had a user base of up to one billion,[10] making it the most globally popular messaging application.
            WhatsApp Inc., based in Mountain View, California, was acquired by Facebook Inc. on February 19, 2014, for approximately US$19.3 billion.
        </div>
    </ej-tab>
  • ts
  • import { Component } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html'
    })
    export class DefaultComponent {
        
        constructor() {
           
        }
    }

    enabledItemIndex number[]

    Enables the given tab headers and content panels.

    Default Value

    • []

    Example

  • html
  • <ej-tab id="tab" [enabledItemIndex]="enabledItemIndex" [disabledItemIndex]="disabledItemIndex">
        <ul>
            <li><a href="#twitter">Twitter</a></li>
            <li><a href="#facebook">Facebook</a></li>
            <li><a href="#whatsapp">WhatsApp</a></li>
        </ul>
        <div id="twitter">
            Twitter is an online social networking service that enables users to send and read short 140-character messages called "tweets".
            Registered users can read and post tweets, but those who are unregistered can only read them. Users access Twitter through the website interface, SMS or mobile device app Twitter Inc. is based in San Francisco and has more than 25 offices around the world.
            Twitter was created in March 2006 by Jack Dorsey, Evan Williams, Biz Stone, and Noah Glass and launched in July 2006. The service rapidly gained worldwide popularity, with more than 100 million users posting 340 million tweets a day in 2012.The service also handled 1.6 billion search queries per day.
        </div>
        <div id="facebook">
            Facebook is an online social networking service headquartered in Menlo Park, California. Its website was launched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students Eduardo Saverin, Andrew McCollum, Dustin Moskovitz and Chris Hughes.The founders had initially limited the website's membership to Harvard students, but later expanded it to colleges in the Boston area, the Ivy League, and Stanford University. It gradually added support for students at various other universities and later to high-school students.
        </div>
        <div id="whatsapp">
            WhatsApp Messenger is a proprietary cross-platform instant messaging client for smart phones that operates under a subscription business model. It uses the Internet to send text messages, images, video, user location and audio media messages to other users using standard cellular mobile numbers.
            As of February 2016, WhatsApp had a user base of up to one billion,[10] making it the most globally popular messaging application.
            WhatsApp Inc., based in Mountain View, California, was acquired by Facebook Inc. on February 19, 2014, for approximately US$19.3 billion.
        </div>
    </ej-tab>
  • ts
  • import { Component } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html'
    })
    export class DefaultComponent {
        enabledItemIndex: any;
        enabledItemIndex: any;
        constructor() {
           this.disabledItemIndex = [0,1];
           this.enabledItemIndex = [0,1];
        }
    }

    enablePersistence boolean

    Save current model value to browser cookies for state maintains. While refresh the Tab control page the model value apply from browser cookies.

    Default Value

    • false

    Example

  • html
  • <ej-tab id="tab" [enablePersistence]=true>
        <ul>
            <li><a href="#twitter">Twitter</a></li>
            <li><a href="#facebook">Facebook</a></li>
            <li><a href="#whatsapp">WhatsApp</a></li>
        </ul>
        <div id="twitter">
            Twitter is an online social networking service that enables users to send and read short 140-character messages called "tweets".
            Registered users can read and post tweets, but those who are unregistered can only read them. Users access Twitter through the website interface, SMS or mobile device app Twitter Inc. is based in San Francisco and has more than 25 offices around the world.
            Twitter was created in March 2006 by Jack Dorsey, Evan Williams, Biz Stone, and Noah Glass and launched in July 2006. The service rapidly gained worldwide popularity, with more than 100 million users posting 340 million tweets a day in 2012.The service also handled 1.6 billion search queries per day.
        </div>
        <div id="facebook">
            Facebook is an online social networking service headquartered in Menlo Park, California. Its website was launched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students Eduardo Saverin, Andrew McCollum, Dustin Moskovitz and Chris Hughes.The founders had initially limited the website's membership to Harvard students, but later expanded it to colleges in the Boston area, the Ivy League, and Stanford University. It gradually added support for students at various other universities and later to high-school students.
        </div>
        <div id="whatsapp">
            WhatsApp Messenger is a proprietary cross-platform instant messaging client for smart phones that operates under a subscription business model. It uses the Internet to send text messages, images, video, user location and audio media messages to other users using standard cellular mobile numbers.
            As of February 2016, WhatsApp had a user base of up to one billion,[10] making it the most globally popular messaging application.
            WhatsApp Inc., based in Mountain View, California, was acquired by Facebook Inc. on February 19, 2014, for approximately US$19.3 billion.
        </div>
    </ej-tab>
  • ts
  • import { Component } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html'
    })
    export class DefaultComponent {
        
        constructor() {
           
        }
    }

    enableRTL boolean

    Display Right to Left direction for headers and panels text of tab.

    Default Value

    • false

    Example

  • html
  • <ej-tab id="tab" [enableRTL]=true>
        <ul>
            <li><a href="#twitter">Twitter</a></li>
            <li><a href="#facebook">Facebook</a></li>
            <li><a href="#whatsapp">WhatsApp</a></li>
        </ul>
        <div id="twitter">
            Twitter is an online social networking service that enables users to send and read short 140-character messages called "tweets".
            Registered users can read and post tweets, but those who are unregistered can only read them. Users access Twitter through the website interface, SMS or mobile device app Twitter Inc. is based in San Francisco and has more than 25 offices around the world.
            Twitter was created in March 2006 by Jack Dorsey, Evan Williams, Biz Stone, and Noah Glass and launched in July 2006. The service rapidly gained worldwide popularity, with more than 100 million users posting 340 million tweets a day in 2012.The service also handled 1.6 billion search queries per day.
        </div>
        <div id="facebook">
            Facebook is an online social networking service headquartered in Menlo Park, California. Its website was launched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students Eduardo Saverin, Andrew McCollum, Dustin Moskovitz and Chris Hughes.The founders had initially limited the website's membership to Harvard students, but later expanded it to colleges in the Boston area, the Ivy League, and Stanford University. It gradually added support for students at various other universities and later to high-school students.
        </div>
        <div id="whatsapp">
            WhatsApp Messenger is a proprietary cross-platform instant messaging client for smart phones that operates under a subscription business model. It uses the Internet to send text messages, images, video, user location and audio media messages to other users using standard cellular mobile numbers.
            As of February 2016, WhatsApp had a user base of up to one billion,[10] making it the most globally popular messaging application.
            WhatsApp Inc., based in Mountain View, California, was acquired by Facebook Inc. on February 19, 2014, for approximately US$19.3 billion.
        </div>
    </ej-tab>
  • ts
  • import { Component } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html'
    })
    export class DefaultComponent {
        
        constructor() {
           
        }
    }

    enableTabScroll boolean

    Specify to enable scrolling for Tab header.

    Default Value

    • false

    Example

  • ts
  • <<div style="width:600px; margin-left: 25%">
    <ej-tab id="scrollTab" [enableTabScroll]="enableTabScroll" style='display: block'>
            <ul>
                <li><a href="#pizza">Pizza Menu</a></li>
                <li><a href="#pasta">Pasta Menu</a></li>
                <li><a href="#burger">Burger Menu</a></li>
                <li><a href="#sandwich">Sandwich Menu</a></li>
                <li><a href="#spaghetti">Spaghetti Menu</a></li>
                <li><a href="#ramen">Ramen Menu</a></li>
            </ul>
            <div id="pizza" style="background-color: #F5F5F5">
                <!--Food item description-->
                <p>
                    Pizza cooked to perfection tossed with milk, vegetables, potatoes, poultry, 100% pure mutton, and cheese - and in creating nutritious and tasty meals to maintain good health.</p>
            </div>
            <div id="pasta" style="background-color: #F5F5F5">
                <!--dish description-->
                <p>
                    Pasta cooked to perfection tossed with bread, milk, vegetables, potatoes, poultry, 100% pure mutton, and cheese - and in creating nutritious and tasty meals to maintain good health.</p>
            </div>
            <div id="sandwich" style="background-color: #F5F5F5">
                <!--dish description-->
                <p>
                    Sandwich cooked to perfection tossed with bread, milk, vegetables, potatoes, poultry, 100% pure mutton, and cheese - and in creating nutritious and tasty meals to maintain good health.</p>
            </div>
            <div id="burger" style="background-color: #F5F5F5">
                <!--dish description-->
                <p>
                    Burger cooked to perfection tossed with bread, milk, vegetables, potatoes, poultry, 100% pure mutton, and cheese - and in creating nutritious and tasty meals to maintain good health.</p>
            </div>
            <div id="spaghetti" style="background-color: #F5F5F5">
                <!--dish description-->
                <p>
                    Spaghetti cooked to perfection tossed with bread, milk, vegetables, potatoes, poultry, 100% pure mutton, and cheese - and in creating nutritious and tasty meals to maintain good health.</p>
            </div>
            <div id="ramen" style="background-color: #F5F5F5">
                <!--dish description-->
                <p>
                    Ramen cooked to perfection tossed with bread, milk, vegetables, potatoes, poultry, 100% pure mutton, and cheese - and in creating nutritious and tasty meals to maintain good health.</p>
            </div>
        </ej-tab>
    </div>
  • ts
  • import { Component } from '@angular/core';
    import { ViewEncapsulation } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './tab.component.html',
        styleUrls: ['./tab.component.css'],
        encapsulation: ViewEncapsulation.None,
    })
    export class ScrollTabComponent {
        enableTabScroll:boolean;
        constructor() {
        this.enableTabScroll=true;
        }
    }

    events string

    The event API to bind the action for active the tab items.

    Default Value

    • “click”

    Example

  • html
  • <ej-tab id="tab" events="click">
        <ul>
            <li><a href="#twitter">Twitter</a></li>
            <li><a href="#facebook">Facebook</a></li>
            <li><a href="#whatsapp">WhatsApp</a></li>
        </ul>
        <div id="twitter">
            Twitter is an online social networking service that enables users to send and read short 140-character messages called "tweets".
            Registered users can read and post tweets, but those who are unregistered can only read them. Users access Twitter through the website interface, SMS or mobile device app Twitter Inc. is based in San Francisco and has more than 25 offices around the world.
            Twitter was created in March 2006 by Jack Dorsey, Evan Williams, Biz Stone, and Noah Glass and launched in July 2006. The service rapidly gained worldwide popularity, with more than 100 million users posting 340 million tweets a day in 2012.The service also handled 1.6 billion search queries per day.
        </div>
        <div id="facebook">
            Facebook is an online social networking service headquartered in Menlo Park, California. Its website was launched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students Eduardo Saverin, Andrew McCollum, Dustin Moskovitz and Chris Hughes.The founders had initially limited the website's membership to Harvard students, but later expanded it to colleges in the Boston area, the Ivy League, and Stanford University. It gradually added support for students at various other universities and later to high-school students.
        </div>
        <div id="whatsapp">
            WhatsApp Messenger is a proprietary cross-platform instant messaging client for smart phones that operates under a subscription business model. It uses the Internet to send text messages, images, video, user location and audio media messages to other users using standard cellular mobile numbers.
            As of February 2016, WhatsApp had a user base of up to one billion,[10] making it the most globally popular messaging application.
            WhatsApp Inc., based in Mountain View, California, was acquired by Facebook Inc. on February 19, 2014, for approximately US$19.3 billion.
        </div>
    </ej-tab>
  • ts
  • import { Component } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html'
    })
    export class DefaultComponent {
        
        constructor() {
           
        }
    }

    headerPosition string | enum

    Specifies the position of Tab header as top, bottom, left or right. See below to get available Position

    Name Description
    Top Tab headers display to top position
    Bottom Tab headers display to bottom position
    Left Tab headers display to left position.
    Right Tab headers display to right position.

    Default Value

    • “top”

    Example

  • html
  • <ej-tab id="tab" headerPosition="left">
        <ul>
            <li><a href="#twitter">Twitter</a></li>
            <li><a href="#facebook">Facebook</a></li>
            <li><a href="#whatsapp">WhatsApp</a></li>
        </ul>
        <div id="twitter">
            Twitter is an online social networking service that enables users to send and read short 140-character messages called "tweets".
            Registered users can read and post tweets, but those who are unregistered can only read them. Users access Twitter through the website interface, SMS or mobile device app Twitter Inc. is based in San Francisco and has more than 25 offices around the world.
            Twitter was created in March 2006 by Jack Dorsey, Evan Williams, Biz Stone, and Noah Glass and launched in July 2006. The service rapidly gained worldwide popularity, with more than 100 million users posting 340 million tweets a day in 2012.The service also handled 1.6 billion search queries per day.
        </div>
        <div id="facebook">
            Facebook is an online social networking service headquartered in Menlo Park, California. Its website was launched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students Eduardo Saverin, Andrew McCollum, Dustin Moskovitz and Chris Hughes.The founders had initially limited the website's membership to Harvard students, but later expanded it to colleges in the Boston area, the Ivy League, and Stanford University. It gradually added support for students at various other universities and later to high-school students.
        </div>
        <div id="whatsapp">
            WhatsApp Messenger is a proprietary cross-platform instant messaging client for smart phones that operates under a subscription business model. It uses the Internet to send text messages, images, video, user location and audio media messages to other users using standard cellular mobile numbers.
            As of February 2016, WhatsApp had a user base of up to one billion,[10] making it the most globally popular messaging application.
            WhatsApp Inc., based in Mountain View, California, was acquired by Facebook Inc. on February 19, 2014, for approximately US$19.3 billion.
        </div>
    </ej-tab>
  • ts
  • import { Component } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html'
    })
    export class DefaultComponent {
        
        constructor() {
           
        }
    }

    headerSize string | number

    Set the height of the tab header element. Default this property value is null, so height take content height.

    Default Value

    • null

    Example

  • html
  • <ej-tab id="tab" headerSize="100px">
        <ul>
            <li><a href="#twitter">Twitter</a></li>
            <li><a href="#facebook">Facebook</a></li>
            <li><a href="#whatsapp">WhatsApp</a></li>
        </ul>
        <div id="twitter">
            Twitter is an online social networking service that enables users to send and read short 140-character messages called "tweets".
            Registered users can read and post tweets, but those who are unregistered can only read them. Users access Twitter through the website interface, SMS or mobile device app Twitter Inc. is based in San Francisco and has more than 25 offices around the world.
            Twitter was created in March 2006 by Jack Dorsey, Evan Williams, Biz Stone, and Noah Glass and launched in July 2006. The service rapidly gained worldwide popularity, with more than 100 million users posting 340 million tweets a day in 2012.The service also handled 1.6 billion search queries per day.
        </div>
        <div id="facebook">
            Facebook is an online social networking service headquartered in Menlo Park, California. Its website was launched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students Eduardo Saverin, Andrew McCollum, Dustin Moskovitz and Chris Hughes.The founders had initially limited the website's membership to Harvard students, but later expanded it to colleges in the Boston area, the Ivy League, and Stanford University. It gradually added support for students at various other universities and later to high-school students.
        </div>
        <div id="whatsapp">
            WhatsApp Messenger is a proprietary cross-platform instant messaging client for smart phones that operates under a subscription business model. It uses the Internet to send text messages, images, video, user location and audio media messages to other users using standard cellular mobile numbers.
            As of February 2016, WhatsApp had a user base of up to one billion,[10] making it the most globally popular messaging application.
            WhatsApp Inc., based in Mountain View, California, was acquired by Facebook Inc. on February 19, 2014, for approximately US$19.3 billion.
        </div>
    </ej-tab>
  • ts
  • import { Component } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html'
    })
    export class DefaultComponent {
        
        constructor() {
           
        }
    }

    height string | number

    Height set the outer panel element. Default this property value is null, so height take content height.

    Default Value

    • null

    Example

  • html
  • <ej-tab id="tab" height="320">
        <ul>
            <li><a href="#twitter">Twitter</a></li>
            <li><a href="#facebook">Facebook</a></li>
            <li><a href="#whatsapp">WhatsApp</a></li>
        </ul>
        <div id="twitter">
            Twitter is an online social networking service that enables users to send and read short 140-character messages called "tweets".
            Registered users can read and post tweets, but those who are unregistered can only read them. Users access Twitter through the website interface, SMS or mobile device app Twitter Inc. is based in San Francisco and has more than 25 offices around the world.
            Twitter was created in March 2006 by Jack Dorsey, Evan Williams, Biz Stone, and Noah Glass and launched in July 2006. The service rapidly gained worldwide popularity, with more than 100 million users posting 340 million tweets a day in 2012.The service also handled 1.6 billion search queries per day.
        </div>
        <div id="facebook">
            Facebook is an online social networking service headquartered in Menlo Park, California. Its website was launched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students Eduardo Saverin, Andrew McCollum, Dustin Moskovitz and Chris Hughes.The founders had initially limited the website's membership to Harvard students, but later expanded it to colleges in the Boston area, the Ivy League, and Stanford University. It gradually added support for students at various other universities and later to high-school students.
        </div>
        <div id="whatsapp">
            WhatsApp Messenger is a proprietary cross-platform instant messaging client for smart phones that operates under a subscription business model. It uses the Internet to send text messages, images, video, user location and audio media messages to other users using standard cellular mobile numbers.
            As of February 2016, WhatsApp had a user base of up to one billion,[10] making it the most globally popular messaging application.
            WhatsApp Inc., based in Mountain View, California, was acquired by Facebook Inc. on February 19, 2014, for approximately US$19.3 billion.
        </div>
    </ej-tab>
  • ts
  • import { Component } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html'
    })
    export class DefaultComponent {
        
        constructor() {
           
        }
    }

    heightAdjustMode string | enum

    Adjust the content panel height for given option (content, auto and fill), by default panels height adjust based on the content.See below to get available HeightAdjustMode

    Name Type Default Description
    None string content Content panel take based on the height property.
    Content string content Content panel will take height based on the content height.
    Auto string auto All panel height will be set the tallest panel height
    Fill string fill Content panel take based on the parent height

    Default Value

    • “content”

    Example

  • html
  • <ej-tab id="tab" heightAdjustMode="context">
        <ul>
            <li><a href="#twitter">Twitter</a></li>
            <li><a href="#facebook">Facebook</a></li>
            <li><a href="#whatsapp">WhatsApp</a></li>
        </ul>
        <div id="twitter">
            Twitter is an online social networking service that enables users to send and read short 140-character messages called "tweets".
            Registered users can read and post tweets, but those who are unregistered can only read them. Users access Twitter through the website interface, SMS or mobile device app Twitter Inc. is based in San Francisco and has more than 25 offices around the world.
            Twitter was created in March 2006 by Jack Dorsey, Evan Williams, Biz Stone, and Noah Glass and launched in July 2006. The service rapidly gained worldwide popularity, with more than 100 million users posting 340 million tweets a day in 2012.The service also handled 1.6 billion search queries per day.
        </div>
        <div id="facebook">
            Facebook is an online social networking service headquartered in Menlo Park, California. Its website was launched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students Eduardo Saverin, Andrew McCollum, Dustin Moskovitz and Chris Hughes.The founders had initially limited the website's membership to Harvard students, but later expanded it to colleges in the Boston area, the Ivy League, and Stanford University. It gradually added support for students at various other universities and later to high-school students.
        </div>
        <div id="whatsapp">
            WhatsApp Messenger is a proprietary cross-platform instant messaging client for smart phones that operates under a subscription business model. It uses the Internet to send text messages, images, video, user location and audio media messages to other users using standard cellular mobile numbers.
            As of February 2016, WhatsApp had a user base of up to one billion,[10] making it the most globally popular messaging application.
            WhatsApp Inc., based in Mountain View, California, was acquired by Facebook Inc. on February 19, 2014, for approximately US$19.3 billion.
        </div>
    </ej-tab>
  • ts
  • import { Component } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html'
    })
    export class DefaultComponent {
        
        constructor() {
           
        }
    }

    hiddenItemIndex array

    Specifies to hide a pane of Tab control.

    Default Value

    • []

    Example

  • html
  • <ej-tab id="tab" [hiddenItemIndex]="hiddenItemIndex">
        
        <ul>
            <li><a href="#twitter">Twitter</a></li>
            <li><a href="#facebook">Facebook</a></li>
            <li><a href="#whatsapp">WhatsApp</a></li>
        </ul>
        <div id="twitter">
            Twitter is an online social networking service that enables users to send and read short 140-character messages called "tweets".
            Registered users can read and post tweets, but those who are unregistered can only read them. Users access Twitter through the website interface, SMS or mobile device app Twitter Inc. is based in San Francisco and has more than 25 offices around the world.
            Twitter was created in March 2006 by Jack Dorsey, Evan Williams, Biz Stone, and Noah Glass and launched in July 2006. The service rapidly gained worldwide popularity, with more than 100 million users posting 340 million tweets a day in 2012.The service also handled 1.6 billion search queries per day.
        </div>
        <div id="facebook">
            Facebook is an online social networking service headquartered in Menlo Park, California. Its website was launched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students Eduardo Saverin, Andrew McCollum, Dustin Moskovitz and Chris Hughes.The founders had initially limited the website's membership to Harvard students, but later expanded it to colleges in the Boston area, the Ivy League, and Stanford University. It gradually added support for students at various other universities and later to high-school students.
        </div>
        <div id="whatsapp">
            WhatsApp Messenger is a proprietary cross-platform instant messaging client for smart phones that operates under a subscription business model. It uses the Internet to send text messages, images, video, user location and audio media messages to other users using standard cellular mobile numbers.
            As of February 2016, WhatsApp had a user base of up to one billion,[10] making it the most globally popular messaging application.
            WhatsApp Inc., based in Mountain View, California, was acquired by Facebook Inc. on February 19, 2014, for approximately US$19.3 billion.
        </div>
    </ej-tab>
  • ts
  • import { Component } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html'
    })
    export class DefaultComponent {
        hiddenItemIndex: array;
        constructor() {
           this.hiddenItemIndex= [0,1];
        }
    }

    htmlAttributes object

    Specifies the HTML Attributes of the Tab.

    Default Value

    • {}

    Example

  • html
  • <ej-tab id="tab" [htmlAttributes]="htmlAttributes">
        <ul>
            <li><a href="#twitter">Twitter</a></li>
            <li><a href="#facebook">Facebook</a></li>
            <li><a href="#whatsapp">WhatsApp</a></li>
        </ul>
        <div id="twitter">
            Twitter is an online social networking service that enables users to send and read short 140-character messages called "tweets".
            Registered users can read and post tweets, but those who are unregistered can only read them. Users access Twitter through the website interface, SMS or mobile device app Twitter Inc. is based in San Francisco and has more than 25 offices around the world.
            Twitter was created in March 2006 by Jack Dorsey, Evan Williams, Biz Stone, and Noah Glass and launched in July 2006. The service rapidly gained worldwide popularity, with more than 100 million users posting 340 million tweets a day in 2012.The service also handled 1.6 billion search queries per day.
        </div>
        <div id="facebook">
            Facebook is an online social networking service headquartered in Menlo Park, California. Its website was launched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students Eduardo Saverin, Andrew McCollum, Dustin Moskovitz and Chris Hughes.The founders had initially limited the website's membership to Harvard students, but later expanded it to colleges in the Boston area, the Ivy League, and Stanford University. It gradually added support for students at various other universities and later to high-school students.
        </div>
        <div id="whatsapp">
            WhatsApp Messenger is a proprietary cross-platform instant messaging client for smart phones that operates under a subscription business model. It uses the Internet to send text messages, images, video, user location and audio media messages to other users using standard cellular mobile numbers.
            As of February 2016, WhatsApp had a user base of up to one billion,[10] making it the most globally popular messaging application.
            WhatsApp Inc., based in Mountain View, California, was acquired by Facebook Inc. on February 19, 2014, for approximately US$19.3 billion.
        </div>
    </ej-tab>
  • ts
  • import { Component } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html'
    })
    export class DefaultComponent {
        htmlAttributes: Object;
        constructor() {
           this.htmlAttributes = {class:"my-class"};
        }
    }

    idPrefix string

    The idPrefix property appends the given string on the added tab item id’s in runtime.

    Default Value

    • “ej-tab-“

    Example

  • html
  • <ej-tab id="tab" [allowKeyboardNavigation]=true>
        <ul>
            <li><a href="#twitter">Twitter</a></li>
            <li><a href="#facebook">Facebook</a></li>
            <li><a href="#whatsapp">WhatsApp</a></li>
        </ul>
        <div id="twitter">
            Twitter is an online social networking service that enables users to send and read short 140-character messages called "tweets".
            Registered users can read and post tweets, but those who are unregistered can only read them. Users access Twitter through the website interface, SMS or mobile device app Twitter Inc. is based in San Francisco and has more than 25 offices around the world.
            Twitter was created in March 2006 by Jack Dorsey, Evan Williams, Biz Stone, and Noah Glass and launched in July 2006. The service rapidly gained worldwide popularity, with more than 100 million users posting 340 million tweets a day in 2012.The service also handled 1.6 billion search queries per day.
        </div>
        <div id="facebook">
            Facebook is an online social networking service headquartered in Menlo Park, California. Its website was launched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students Eduardo Saverin, Andrew McCollum, Dustin Moskovitz and Chris Hughes.The founders had initially limited the website's membership to Harvard students, but later expanded it to colleges in the Boston area, the Ivy League, and Stanford University. It gradually added support for students at various other universities and later to high-school students.
        </div>
        <div id="whatsapp">
            WhatsApp Messenger is a proprietary cross-platform instant messaging client for smart phones that operates under a subscription business model. It uses the Internet to send text messages, images, video, user location and audio media messages to other users using standard cellular mobile numbers.
            As of February 2016, WhatsApp had a user base of up to one billion,[10] making it the most globally popular messaging application.
            WhatsApp Inc., based in Mountain View, California, was acquired by Facebook Inc. on February 19, 2014, for approximately US$19.3 billion.
        </div>
    </ej-tab>
  • ts
  • import { Component } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html'
    })
    export class DefaultComponent {
        
        constructor() {
           
        }
    }

    selectedItemIndex number

    Specifies the Tab header in active for given index value.

    Default Value

    • 0

    Example

  • html
  • <ej-tab id="tab" [selectedItemIndex]="selectedItemIndex">
        <ul>
            <li><a href="#twitter">Twitter</a></li>
            <li><a href="#facebook">Facebook</a></li>
            <li><a href="#whatsapp">WhatsApp</a></li>
        </ul>
        <div id="twitter">
            Twitter is an online social networking service that enables users to send and read short 140-character messages called "tweets".
            Registered users can read and post tweets, but those who are unregistered can only read them. Users access Twitter through the website interface, SMS or mobile device app Twitter Inc. is based in San Francisco and has more than 25 offices around the world.
            Twitter was created in March 2006 by Jack Dorsey, Evan Williams, Biz Stone, and Noah Glass and launched in July 2006. The service rapidly gained worldwide popularity, with more than 100 million users posting 340 million tweets a day in 2012.The service also handled 1.6 billion search queries per day.
        </div>
        <div id="facebook">
            Facebook is an online social networking service headquartered in Menlo Park, California. Its website was launched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students Eduardo Saverin, Andrew McCollum, Dustin Moskovitz and Chris Hughes.The founders had initially limited the website's membership to Harvard students, but later expanded it to colleges in the Boston area, the Ivy League, and Stanford University. It gradually added support for students at various other universities and later to high-school students.
        </div>
        <div id="whatsapp">
            WhatsApp Messenger is a proprietary cross-platform instant messaging client for smart phones that operates under a subscription business model. It uses the Internet to send text messages, images, video, user location and audio media messages to other users using standard cellular mobile numbers.
            As of February 2016, WhatsApp had a user base of up to one billion,[10] making it the most globally popular messaging application.
            WhatsApp Inc., based in Mountain View, California, was acquired by Facebook Inc. on February 19, 2014, for approximately US$19.3 billion.
        </div>
    </ej-tab>
  • ts
  • import { Component } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html'
    })
    export class DefaultComponent {
         selectedItemIndex: any;
        constructor() {
           this.selectedItemIndex = 1;
        }
    }

    showCloseButton boolean

    Display the close button for each tab items. While clicking on the close icon, particular tab item will be removed.

    Default Value

    • false

    Example

  • html
  • <ej-tab id="tab" [showCloseButton]=true>
        <ul>
            <li><a href="#twitter">Twitter</a></li>
            <li><a href="#facebook">Facebook</a></li>
            <li><a href="#whatsapp">WhatsApp</a></li>
        </ul>
        <div id="twitter">
            Twitter is an online social networking service that enables users to send and read short 140-character messages called "tweets".
            Registered users can read and post tweets, but those who are unregistered can only read them. Users access Twitter through the website interface, SMS or mobile device app Twitter Inc. is based in San Francisco and has more than 25 offices around the world.
            Twitter was created in March 2006 by Jack Dorsey, Evan Williams, Biz Stone, and Noah Glass and launched in July 2006. The service rapidly gained worldwide popularity, with more than 100 million users posting 340 million tweets a day in 2012.The service also handled 1.6 billion search queries per day.
        </div>
        <div id="facebook">
            Facebook is an online social networking service headquartered in Menlo Park, California. Its website was launched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students Eduardo Saverin, Andrew McCollum, Dustin Moskovitz and Chris Hughes.The founders had initially limited the website's membership to Harvard students, but later expanded it to colleges in the Boston area, the Ivy League, and Stanford University. It gradually added support for students at various other universities and later to high-school students.
        </div>
        <div id="whatsapp">
            WhatsApp Messenger is a proprietary cross-platform instant messaging client for smart phones that operates under a subscription business model. It uses the Internet to send text messages, images, video, user location and audio media messages to other users using standard cellular mobile numbers.
            As of February 2016, WhatsApp had a user base of up to one billion,[10] making it the most globally popular messaging application.
            WhatsApp Inc., based in Mountain View, California, was acquired by Facebook Inc. on February 19, 2014, for approximately US$19.3 billion.
        </div>
    </ej-tab>
  • ts
  • import { Component } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html'
    })
    export class DefaultComponent {
        
        constructor() {
           
        }
    }

    showReloadIcon boolean

    Display the Reload button for each tab items.

    Default Value

    • false

    Example

  • html
  • <ej-tab id="tab" [showReloadIcon]=true>
        <ul>
            <li><a href="#twitter">Twitter</a></li>
            <li><a href="#facebook">Facebook</a></li>
            <li><a href="#whatsapp">WhatsApp</a></li>
        </ul>
        <div id="twitter">
            Twitter is an online social networking service that enables users to send and read short 140-character messages called "tweets".
            Registered users can read and post tweets, but those who are unregistered can only read them. Users access Twitter through the website interface, SMS or mobile device app Twitter Inc. is based in San Francisco and has more than 25 offices around the world.
            Twitter was created in March 2006 by Jack Dorsey, Evan Williams, Biz Stone, and Noah Glass and launched in July 2006. The service rapidly gained worldwide popularity, with more than 100 million users posting 340 million tweets a day in 2012.The service also handled 1.6 billion search queries per day.
        </div>
        <div id="facebook">
            Facebook is an online social networking service headquartered in Menlo Park, California. Its website was launched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students Eduardo Saverin, Andrew McCollum, Dustin Moskovitz and Chris Hughes.The founders had initially limited the website's membership to Harvard students, but later expanded it to colleges in the Boston area, the Ivy League, and Stanford University. It gradually added support for students at various other universities and later to high-school students.
        </div>
        <div id="whatsapp">
            WhatsApp Messenger is a proprietary cross-platform instant messaging client for smart phones that operates under a subscription business model. It uses the Internet to send text messages, images, video, user location and audio media messages to other users using standard cellular mobile numbers.
            As of February 2016, WhatsApp had a user base of up to one billion,[10] making it the most globally popular messaging application.
            WhatsApp Inc., based in Mountain View, California, was acquired by Facebook Inc. on February 19, 2014, for approximately US$19.3 billion.
        </div>
    </ej-tab>
  • ts
  • import { Component } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html'
    })
    export class DefaultComponent {
        
        constructor() {
           
        }
    }

    showRoundedCorner boolean

    Tab panels and headers to be displayed in rounded corner style.

    Default Value

    • false

    Example

  • html
  • <ej-tab id="tab" [showRoundedCorner]=true>
        <ul>
            <li><a href="#twitter">Twitter</a></li>
            <li><a href="#facebook">Facebook</a></li>
            <li><a href="#whatsapp">WhatsApp</a></li>
        </ul>
        <div id="twitter">
            Twitter is an online social networking service that enables users to send and read short 140-character messages called "tweets".
            Registered users can read and post tweets, but those who are unregistered can only read them. Users access Twitter through the website interface, SMS or mobile device app Twitter Inc. is based in San Francisco and has more than 25 offices around the world.
            Twitter was created in March 2006 by Jack Dorsey, Evan Williams, Biz Stone, and Noah Glass and launched in July 2006. The service rapidly gained worldwide popularity, with more than 100 million users posting 340 million tweets a day in 2012.The service also handled 1.6 billion search queries per day.
        </div>
        <div id="facebook">
            Facebook is an online social networking service headquartered in Menlo Park, California. Its website was launched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students Eduardo Saverin, Andrew McCollum, Dustin Moskovitz and Chris Hughes.The founders had initially limited the website's membership to Harvard students, but later expanded it to colleges in the Boston area, the Ivy League, and Stanford University. It gradually added support for students at various other universities and later to high-school students.
        </div>
        <div id="whatsapp">
            WhatsApp Messenger is a proprietary cross-platform instant messaging client for smart phones that operates under a subscription business model. It uses the Internet to send text messages, images, video, user location and audio media messages to other users using standard cellular mobile numbers.
            As of February 2016, WhatsApp had a user base of up to one billion,[10] making it the most globally popular messaging application.
            WhatsApp Inc., based in Mountain View, California, was acquired by Facebook Inc. on February 19, 2014, for approximately US$19.3 billion.
        </div>
    </ej-tab>
  • ts
  • import { Component } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html'
    })
    export class DefaultComponent {
        
        constructor() {
           
        }
    }

    width string | number

    Set the width for outer panel element, if not it’s take parent width.

    Default Value

    • null

    Example

  • html
  • <ej-tab id="tab" width="300">
        <ul>
            <li><a href="#twitter">Twitter</a></li>
            <li><a href="#facebook">Facebook</a></li>
            <li><a href="#whatsapp">WhatsApp</a></li>
        </ul>
        <div id="twitter">
            Twitter is an online social networking service that enables users to send and read short 140-character messages called "tweets".
            Registered users can read and post tweets, but those who are unregistered can only read them. Users access Twitter through the website interface, SMS or mobile device app Twitter Inc. is based in San Francisco and has more than 25 offices around the world.
            Twitter was created in March 2006 by Jack Dorsey, Evan Williams, Biz Stone, and Noah Glass and launched in July 2006. The service rapidly gained worldwide popularity, with more than 100 million users posting 340 million tweets a day in 2012.The service also handled 1.6 billion search queries per day.
        </div>
        <div id="facebook">
            Facebook is an online social networking service headquartered in Menlo Park, California. Its website was launched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students Eduardo Saverin, Andrew McCollum, Dustin Moskovitz and Chris Hughes.The founders had initially limited the website's membership to Harvard students, but later expanded it to colleges in the Boston area, the Ivy League, and Stanford University. It gradually added support for students at various other universities and later to high-school students.
        </div>
        <div id="whatsapp">
            WhatsApp Messenger is a proprietary cross-platform instant messaging client for smart phones that operates under a subscription business model. It uses the Internet to send text messages, images, video, user location and audio media messages to other users using standard cellular mobile numbers.
            As of February 2016, WhatsApp had a user base of up to one billion,[10] making it the most globally popular messaging application.
            WhatsApp Inc., based in Mountain View, California, was acquired by Facebook Inc. on February 19, 2014, for approximately US$19.3 billion.
        </div>
    </ej-tab>
  • ts
  • import { Component } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html'
    })
    export class DefaultComponent {
        
        constructor() {
           
        }
    }

    Methods

    addItem(url, displayLabel, index, cssClass, id)

    Add new tab items with given name, URL and given index position, if index null it’s add last item.

    Name Type Description
    URL string URL name / tab id.
    displayLabel string Tab Display name.
    index number Index position to placed , this is optional.
    cssClass string specifies cssClass, this is optional.
    id string specifies id of tab, this is optional.

    Example

  • html
  • <ej-tab id="tab" [allowKeyboardNavigation]=true>
        <ul>
            <li><a href="#twitter">Twitter</a></li>
            <li><a href="#facebook">Facebook</a></li>
            <li><a href="#whatsapp">WhatsApp</a></li>
        </ul>
        <div id="twitter">
            Twitter is an online social networking service that enables users to send and read short 140-character messages called "tweets".
            Registered users can read and post tweets, but those who are unregistered can only read them. Users access Twitter through the website interface, SMS or mobile device app Twitter Inc. is based in San Francisco and has more than 25 offices around the world.
            Twitter was created in March 2006 by Jack Dorsey, Evan Williams, Biz Stone, and Noah Glass and launched in July 2006. The service rapidly gained worldwide popularity, with more than 100 million users posting 340 million tweets a day in 2012.The service also handled 1.6 billion search queries per day.
        </div>
        <div id="facebook">
            Facebook is an online social networking service headquartered in Menlo Park, California. Its website was launched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students Eduardo Saverin, Andrew McCollum, Dustin Moskovitz and Chris Hughes.The founders had initially limited the website's membership to Harvard students, but later expanded it to colleges in the Boston area, the Ivy League, and Stanford University. It gradually added support for students at various other universities and later to high-school students.
        </div>
        <div id="whatsapp">
            WhatsApp Messenger is a proprietary cross-platform instant messaging client for smart phones that operates under a subscription business model. It uses the Internet to send text messages, images, video, user location and audio media messages to other users using standard cellular mobile numbers.
            As of February 2016, WhatsApp had a user base of up to one billion,[10] making it the most globally popular messaging application.
            WhatsApp Inc., based in Mountain View, California, was acquired by Facebook Inc. on February 19, 2014, for approximately US$19.3 billion.
        </div>
    </ej-tab>
    <button type="button" (click)="OnClick()">Add item</button>
  • ts
  • import { Component } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html'
    })
    export class DefaultComponent {
        
        constructor() {
           
        }
        OnClick(){
    
    
    var obj = $("#tab").data("ejTab");
    
    
    obj.addItem("#new", "New Item", 3, "myClass", "newItem");
    
    }
    }
  • html
  • <ej-tab id="tab" [allowKeyboardNavigation]=true>
        <ul>
            <li><a href="#twitter">Twitter</a></li>
            <li><a href="#facebook">Facebook</a></li>
            <li><a href="#whatsapp">WhatsApp</a></li>
        </ul>
        <div id="twitter">
            Twitter is an online social networking service that enables users to send and read short 140-character messages called "tweets".
            Registered users can read and post tweets, but those who are unregistered can only read them. Users access Twitter through the website interface, SMS or mobile device app Twitter Inc. is based in San Francisco and has more than 25 offices around the world.
            Twitter was created in March 2006 by Jack Dorsey, Evan Williams, Biz Stone, and Noah Glass and launched in July 2006. The service rapidly gained worldwide popularity, with more than 100 million users posting 340 million tweets a day in 2012.The service also handled 1.6 billion search queries per day.
        </div>
        <div id="facebook">
            Facebook is an online social networking service headquartered in Menlo Park, California. Its website was launched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students Eduardo Saverin, Andrew McCollum, Dustin Moskovitz and Chris Hughes.The founders had initially limited the website's membership to Harvard students, but later expanded it to colleges in the Boston area, the Ivy League, and Stanford University. It gradually added support for students at various other universities and later to high-school students.
        </div>
        <div id="whatsapp">
            WhatsApp Messenger is a proprietary cross-platform instant messaging client for smart phones that operates under a subscription business model. It uses the Internet to send text messages, images, video, user location and audio media messages to other users using standard cellular mobile numbers.
            As of February 2016, WhatsApp had a user base of up to one billion,[10] making it the most globally popular messaging application.
            WhatsApp Inc., based in Mountain View, California, was acquired by Facebook Inc. on February 19, 2014, for approximately US$19.3 billion.
        </div>
    </ej-tab>
    <button type="button" (click)="OnClick()">Add item</button>
  • ts
  • import { Component } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html'
    })
    export class DefaultComponent {
        
        constructor() {
           
        }
        OnClick(){
    
        $("#tab").ejTab("addItem","#new","New Item",3); 
    
    }
    }

    disable()

    To disable the tab control.

    Example

  • html
  • <ej-tab id="tab" [allowKeyboardNavigation]=true>
        <ul>
            <li><a href="#twitter">Twitter</a></li>
            <li><a href="#facebook">Facebook</a></li>
            <li><a href="#whatsapp">WhatsApp</a></li>
        </ul>
        <div id="twitter">
            Twitter is an online social networking service that enables users to send and read short 140-character messages called "tweets".
            Registered users can read and post tweets, but those who are unregistered can only read them. Users access Twitter through the website interface, SMS or mobile device app Twitter Inc. is based in San Francisco and has more than 25 offices around the world.
            Twitter was created in March 2006 by Jack Dorsey, Evan Williams, Biz Stone, and Noah Glass and launched in July 2006. The service rapidly gained worldwide popularity, with more than 100 million users posting 340 million tweets a day in 2012.The service also handled 1.6 billion search queries per day.
        </div>
        <div id="facebook">
            Facebook is an online social networking service headquartered in Menlo Park, California. Its website was launched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students Eduardo Saverin, Andrew McCollum, Dustin Moskovitz and Chris Hughes.The founders had initially limited the website's membership to Harvard students, but later expanded it to colleges in the Boston area, the Ivy League, and Stanford University. It gradually added support for students at various other universities and later to high-school students.
        </div>
        <div id="whatsapp">
            WhatsApp Messenger is a proprietary cross-platform instant messaging client for smart phones that operates under a subscription business model. It uses the Internet to send text messages, images, video, user location and audio media messages to other users using standard cellular mobile numbers.
            As of February 2016, WhatsApp had a user base of up to one billion,[10] making it the most globally popular messaging application.
            WhatsApp Inc., based in Mountain View, California, was acquired by Facebook Inc. on February 19, 2014, for approximately US$19.3 billion.
        </div>
    </ej-tab>
    <button type="button" (click)="OnClick()">Disable</button>
  • ts
  • import { Component } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html'
    })
    export class DefaultComponent {
        
        constructor() {
           
        }
        OnClick(){
    
    
    var obj = $("#tab").data("ejTab");
    
    
    obj.disable();
    
    }
    }
  • html
  • <ej-tab id="tab" [allowKeyboardNavigation]=true>
        <ul>
            <li><a href="#twitter">Twitter</a></li>
            <li><a href="#facebook">Facebook</a></li>
            <li><a href="#whatsapp">WhatsApp</a></li>
        </ul>
        <div id="twitter">
            Twitter is an online social networking service that enables users to send and read short 140-character messages called "tweets".
            Registered users can read and post tweets, but those who are unregistered can only read them. Users access Twitter through the website interface, SMS or mobile device app Twitter Inc. is based in San Francisco and has more than 25 offices around the world.
            Twitter was created in March 2006 by Jack Dorsey, Evan Williams, Biz Stone, and Noah Glass and launched in July 2006. The service rapidly gained worldwide popularity, with more than 100 million users posting 340 million tweets a day in 2012.The service also handled 1.6 billion search queries per day.
        </div>
        <div id="facebook">
            Facebook is an online social networking service headquartered in Menlo Park, California. Its website was launched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students Eduardo Saverin, Andrew McCollum, Dustin Moskovitz and Chris Hughes.The founders had initially limited the website's membership to Harvard students, but later expanded it to colleges in the Boston area, the Ivy League, and Stanford University. It gradually added support for students at various other universities and later to high-school students.
        </div>
        <div id="whatsapp">
            WhatsApp Messenger is a proprietary cross-platform instant messaging client for smart phones that operates under a subscription business model. It uses the Internet to send text messages, images, video, user location and audio media messages to other users using standard cellular mobile numbers.
            As of February 2016, WhatsApp had a user base of up to one billion,[10] making it the most globally popular messaging application.
            WhatsApp Inc., based in Mountain View, California, was acquired by Facebook Inc. on February 19, 2014, for approximately US$19.3 billion.
        </div>
    </ej-tab>
    <button type="button" (click)="OnClick()">Disable</button>
  • ts
  • import { Component } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html'
    })
    export class DefaultComponent {
        
        constructor() {
           
        }
        OnClick(){
    
        $("#tab").ejTab("disable"); 
    
    }
    }

    enable()

    To enable the tab control.

    Example

  • html
  • <ej-tab id="tab" [allowKeyboardNavigation]=true [enabled]=false>
        <ul>
            <li><a href="#twitter">Twitter</a></li>
            <li><a href="#facebook">Facebook</a></li>
            <li><a href="#whatsapp">WhatsApp</a></li>
        </ul>
        <div id="twitter">
            Twitter is an online social networking service that enables users to send and read short 140-character messages called "tweets".
            Registered users can read and post tweets, but those who are unregistered can only read them. Users access Twitter through the website interface, SMS or mobile device app Twitter Inc. is based in San Francisco and has more than 25 offices around the world.
            Twitter was created in March 2006 by Jack Dorsey, Evan Williams, Biz Stone, and Noah Glass and launched in July 2006. The service rapidly gained worldwide popularity, with more than 100 million users posting 340 million tweets a day in 2012.The service also handled 1.6 billion search queries per day.
        </div>
        <div id="facebook">
            Facebook is an online social networking service headquartered in Menlo Park, California. Its website was launched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students Eduardo Saverin, Andrew McCollum, Dustin Moskovitz and Chris Hughes.The founders had initially limited the website's membership to Harvard students, but later expanded it to colleges in the Boston area, the Ivy League, and Stanford University. It gradually added support for students at various other universities and later to high-school students.
        </div>
        <div id="whatsapp">
            WhatsApp Messenger is a proprietary cross-platform instant messaging client for smart phones that operates under a subscription business model. It uses the Internet to send text messages, images, video, user location and audio media messages to other users using standard cellular mobile numbers.
            As of February 2016, WhatsApp had a user base of up to one billion,[10] making it the most globally popular messaging application.
            WhatsApp Inc., based in Mountain View, California, was acquired by Facebook Inc. on February 19, 2014, for approximately US$19.3 billion.
        </div>
    </ej-tab>
    <button type="button" (click)="OnClick()">Enable</button>
  • ts
  • import { Component } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html'
    })
    export class DefaultComponent {
        
        constructor() {
           
        }
        OnClick(){
    
    
    var obj = $("#tab").data("ejTab");
    
    
    obj.enable();
    
    }
    }
  • html
  • <ej-tab id="tab" [allowKeyboardNavigation]=true [enabled]=false>
        <ul>
            <li><a href="#twitter">Twitter</a></li>
            <li><a href="#facebook">Facebook</a></li>
            <li><a href="#whatsapp">WhatsApp</a></li>
        </ul>
        <div id="twitter">
            Twitter is an online social networking service that enables users to send and read short 140-character messages called "tweets".
            Registered users can read and post tweets, but those who are unregistered can only read them. Users access Twitter through the website interface, SMS or mobile device app Twitter Inc. is based in San Francisco and has more than 25 offices around the world.
            Twitter was created in March 2006 by Jack Dorsey, Evan Williams, Biz Stone, and Noah Glass and launched in July 2006. The service rapidly gained worldwide popularity, with more than 100 million users posting 340 million tweets a day in 2012.The service also handled 1.6 billion search queries per day.
        </div>
        <div id="facebook">
            Facebook is an online social networking service headquartered in Menlo Park, California. Its website was launched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students Eduardo Saverin, Andrew McCollum, Dustin Moskovitz and Chris Hughes.The founders had initially limited the website's membership to Harvard students, but later expanded it to colleges in the Boston area, the Ivy League, and Stanford University. It gradually added support for students at various other universities and later to high-school students.
        </div>
        <div id="whatsapp">
            WhatsApp Messenger is a proprietary cross-platform instant messaging client for smart phones that operates under a subscription business model. It uses the Internet to send text messages, images, video, user location and audio media messages to other users using standard cellular mobile numbers.
            As of February 2016, WhatsApp had a user base of up to one billion,[10] making it the most globally popular messaging application.
            WhatsApp Inc., based in Mountain View, California, was acquired by Facebook Inc. on February 19, 2014, for approximately US$19.3 billion.
        </div>
    </ej-tab>
    <button type="button" (click)="OnClick()">Enable</button>
  • ts
  • import { Component } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html'
    })
    export class DefaultComponent {
        
        constructor() {
           
        }
        OnClick(){
    
        $("#tab").ejTab("enable"); 
    
    }
    }

    getItemsCount()

    This function get the number of tab rendered

    ####Returns

    number

    Example

  • html
  • <ej-tab id="tab" [allowKeyboardNavigation]=true>
        <ul>
            <li><a href="#twitter">Twitter</a></li>
            <li><a href="#facebook">Facebook</a></li>
            <li><a href="#whatsapp">WhatsApp</a></li>
        </ul>
        <div id="twitter">
            Twitter is an online social networking service that enables users to send and read short 140-character messages called "tweets".
            Registered users can read and post tweets, but those who are unregistered can only read them. Users access Twitter through the website interface, SMS or mobile device app Twitter Inc. is based in San Francisco and has more than 25 offices around the world.
            Twitter was created in March 2006 by Jack Dorsey, Evan Williams, Biz Stone, and Noah Glass and launched in July 2006. The service rapidly gained worldwide popularity, with more than 100 million users posting 340 million tweets a day in 2012.The service also handled 1.6 billion search queries per day.
        </div>
        <div id="facebook">
            Facebook is an online social networking service headquartered in Menlo Park, California. Its website was launched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students Eduardo Saverin, Andrew McCollum, Dustin Moskovitz and Chris Hughes.The founders had initially limited the website's membership to Harvard students, but later expanded it to colleges in the Boston area, the Ivy League, and Stanford University. It gradually added support for students at various other universities and later to high-school students.
        </div>
        <div id="whatsapp">
            WhatsApp Messenger is a proprietary cross-platform instant messaging client for smart phones that operates under a subscription business model. It uses the Internet to send text messages, images, video, user location and audio media messages to other users using standard cellular mobile numbers.
            As of February 2016, WhatsApp had a user base of up to one billion,[10] making it the most globally popular messaging application.
            WhatsApp Inc., based in Mountain View, California, was acquired by Facebook Inc. on February 19, 2014, for approximately US$19.3 billion.
        </div>
    </ej-tab>
    <button type="button" (click)="OnClick()">GetItemsCount</button>
  • ts
  • import { Component } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html'
    })
    export class DefaultComponent {
        
        constructor() {
           
        }
        OnClick(){
    
    
    var obj = $("#tab").data("ejTab");
    
    
    obj.getItemsCount();
    
    }
    }
  • html
  • <ej-tab id="tab" [allowKeyboardNavigation]=true>
        <ul>
            <li><a href="#twitter">Twitter</a></li>
            <li><a href="#facebook">Facebook</a></li>
            <li><a href="#whatsapp">WhatsApp</a></li>
        </ul>
        <div id="twitter">
            Twitter is an online social networking service that enables users to send and read short 140-character messages called "tweets".
            Registered users can read and post tweets, but those who are unregistered can only read them. Users access Twitter through the website interface, SMS or mobile device app Twitter Inc. is based in San Francisco and has more than 25 offices around the world.
            Twitter was created in March 2006 by Jack Dorsey, Evan Williams, Biz Stone, and Noah Glass and launched in July 2006. The service rapidly gained worldwide popularity, with more than 100 million users posting 340 million tweets a day in 2012.The service also handled 1.6 billion search queries per day.
        </div>
        <div id="facebook">
            Facebook is an online social networking service headquartered in Menlo Park, California. Its website was launched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students Eduardo Saverin, Andrew McCollum, Dustin Moskovitz and Chris Hughes.The founders had initially limited the website's membership to Harvard students, but later expanded it to colleges in the Boston area, the Ivy League, and Stanford University. It gradually added support for students at various other universities and later to high-school students.
        </div>
        <div id="whatsapp">
            WhatsApp Messenger is a proprietary cross-platform instant messaging client for smart phones that operates under a subscription business model. It uses the Internet to send text messages, images, video, user location and audio media messages to other users using standard cellular mobile numbers.
            As of February 2016, WhatsApp had a user base of up to one billion,[10] making it the most globally popular messaging application.
            WhatsApp Inc., based in Mountain View, California, was acquired by Facebook Inc. on February 19, 2014, for approximately US$19.3 billion.
        </div>
    </ej-tab>
    <button type="button" (click)="OnClick()">GetItemsCount</button>
  • ts
  • import { Component } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html'
    })
    export class DefaultComponent {
        
        constructor() {
           
        }
        OnClick(){
    
        $("#tab").ejTab("getItemsCount"); 
    
    }
    }

    hide()

    This function hides the tab control.

    Example

  • html
  • <ej-tab id="tab" [allowKeyboardNavigation]=true>
        <ul>
            <li><a href="#twitter">Twitter</a></li>
            <li><a href="#facebook">Facebook</a></li>
            <li><a href="#whatsapp">WhatsApp</a></li>
        </ul>
        <div id="twitter">
            Twitter is an online social networking service that enables users to send and read short 140-character messages called "tweets".
            Registered users can read and post tweets, but those who are unregistered can only read them. Users access Twitter through the website interface, SMS or mobile device app Twitter Inc. is based in San Francisco and has more than 25 offices around the world.
            Twitter was created in March 2006 by Jack Dorsey, Evan Williams, Biz Stone, and Noah Glass and launched in July 2006. The service rapidly gained worldwide popularity, with more than 100 million users posting 340 million tweets a day in 2012.The service also handled 1.6 billion search queries per day.
        </div>
        <div id="facebook">
            Facebook is an online social networking service headquartered in Menlo Park, California. Its website was launched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students Eduardo Saverin, Andrew McCollum, Dustin Moskovitz and Chris Hughes.The founders had initially limited the website's membership to Harvard students, but later expanded it to colleges in the Boston area, the Ivy League, and Stanford University. It gradually added support for students at various other universities and later to high-school students.
        </div>
        <div id="whatsapp">
            WhatsApp Messenger is a proprietary cross-platform instant messaging client for smart phones that operates under a subscription business model. It uses the Internet to send text messages, images, video, user location and audio media messages to other users using standard cellular mobile numbers.
            As of February 2016, WhatsApp had a user base of up to one billion,[10] making it the most globally popular messaging application.
            WhatsApp Inc., based in Mountain View, California, was acquired by Facebook Inc. on February 19, 2014, for approximately US$19.3 billion.
        </div>
    </ej-tab>
    <button type="button" (click)="OnClick()">Hide</button>
  • ts
  • import { Component } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html'
    })
    export class DefaultComponent {
        
        constructor() {
           
        }
        OnClick(){
    
    
    var obj = $("#tab").data("ejTab");
    
    
    obj.hide();
    
    }
    }
  • html
  • <ej-tab id="tab" [allowKeyboardNavigation]=true>
        <ul>
            <li><a href="#twitter">Twitter</a></li>
            <li><a href="#facebook">Facebook</a></li>
            <li><a href="#whatsapp">WhatsApp</a></li>
        </ul>
        <div id="twitter">
            Twitter is an online social networking service that enables users to send and read short 140-character messages called "tweets".
            Registered users can read and post tweets, but those who are unregistered can only read them. Users access Twitter through the website interface, SMS or mobile device app Twitter Inc. is based in San Francisco and has more than 25 offices around the world.
            Twitter was created in March 2006 by Jack Dorsey, Evan Williams, Biz Stone, and Noah Glass and launched in July 2006. The service rapidly gained worldwide popularity, with more than 100 million users posting 340 million tweets a day in 2012.The service also handled 1.6 billion search queries per day.
        </div>
        <div id="facebook">
            Facebook is an online social networking service headquartered in Menlo Park, California. Its website was launched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students Eduardo Saverin, Andrew McCollum, Dustin Moskovitz and Chris Hughes.The founders had initially limited the website's membership to Harvard students, but later expanded it to colleges in the Boston area, the Ivy League, and Stanford University. It gradually added support for students at various other universities and later to high-school students.
        </div>
        <div id="whatsapp">
            WhatsApp Messenger is a proprietary cross-platform instant messaging client for smart phones that operates under a subscription business model. It uses the Internet to send text messages, images, video, user location and audio media messages to other users using standard cellular mobile numbers.
            As of February 2016, WhatsApp had a user base of up to one billion,[10] making it the most globally popular messaging application.
            WhatsApp Inc., based in Mountain View, California, was acquired by Facebook Inc. on February 19, 2014, for approximately US$19.3 billion.
        </div>
    </ej-tab>
    <button type="button" (click)="OnClick()">Hide</button>
  • ts
  • import { Component } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html'
    })
    export class DefaultComponent {
        
        constructor() {
           
        }
        OnClick(){
    
        $("#tab").ejTab("hide"); 
    
    }
    }

    hideItem(index)

    This function hides the specified item tab in tab control.

    Name Type Description
    index number index of tab item.

    Example

  • html
  • <ej-tab id="tab" [allowKeyboardNavigation]=true>
        <ul>
            <li><a href="#twitter">Twitter</a></li>
            <li><a href="#facebook">Facebook</a></li>
            <li><a href="#whatsapp">WhatsApp</a></li>
        </ul>
        <div id="twitter">
            Twitter is an online social networking service that enables users to send and read short 140-character messages called "tweets".
            Registered users can read and post tweets, but those who are unregistered can only read them. Users access Twitter through the website interface, SMS or mobile device app Twitter Inc. is based in San Francisco and has more than 25 offices around the world.
            Twitter was created in March 2006 by Jack Dorsey, Evan Williams, Biz Stone, and Noah Glass and launched in July 2006. The service rapidly gained worldwide popularity, with more than 100 million users posting 340 million tweets a day in 2012.The service also handled 1.6 billion search queries per day.
        </div>
        <div id="facebook">
            Facebook is an online social networking service headquartered in Menlo Park, California. Its website was launched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students Eduardo Saverin, Andrew McCollum, Dustin Moskovitz and Chris Hughes.The founders had initially limited the website's membership to Harvard students, but later expanded it to colleges in the Boston area, the Ivy League, and Stanford University. It gradually added support for students at various other universities and later to high-school students.
        </div>
        <div id="whatsapp">
            WhatsApp Messenger is a proprietary cross-platform instant messaging client for smart phones that operates under a subscription business model. It uses the Internet to send text messages, images, video, user location and audio media messages to other users using standard cellular mobile numbers.
            As of February 2016, WhatsApp had a user base of up to one billion,[10] making it the most globally popular messaging application.
            WhatsApp Inc., based in Mountain View, California, was acquired by Facebook Inc. on February 19, 2014, for approximately US$19.3 billion.
        </div>
    </ej-tab>
    <button type="button" (click)="OnClick()">Hide</button>
  • ts
  • import { Component } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html'
    })
    export class DefaultComponent {
        
        constructor() {
           
        }
        OnClick(){
    
    
    var obj = $("#tab").data("ejTab");
    
    
    obj.hideItem(1);
    
    }
    }
  • html
  • <ej-tab id="tab" [allowKeyboardNavigation]=true>
        <ul>
            <li><a href="#twitter">Twitter</a></li>
            <li><a href="#facebook">Facebook</a></li>
            <li><a href="#whatsapp">WhatsApp</a></li>
        </ul>
        <div id="twitter">
            Twitter is an online social networking service that enables users to send and read short 140-character messages called "tweets".
            Registered users can read and post tweets, but those who are unregistered can only read them. Users access Twitter through the website interface, SMS or mobile device app Twitter Inc. is based in San Francisco and has more than 25 offices around the world.
            Twitter was created in March 2006 by Jack Dorsey, Evan Williams, Biz Stone, and Noah Glass and launched in July 2006. The service rapidly gained worldwide popularity, with more than 100 million users posting 340 million tweets a day in 2012.The service also handled 1.6 billion search queries per day.
        </div>
        <div id="facebook">
            Facebook is an online social networking service headquartered in Menlo Park, California. Its website was launched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students Eduardo Saverin, Andrew McCollum, Dustin Moskovitz and Chris Hughes.The founders had initially limited the website's membership to Harvard students, but later expanded it to colleges in the Boston area, the Ivy League, and Stanford University. It gradually added support for students at various other universities and later to high-school students.
        </div>
        <div id="whatsapp">
            WhatsApp Messenger is a proprietary cross-platform instant messaging client for smart phones that operates under a subscription business model. It uses the Internet to send text messages, images, video, user location and audio media messages to other users using standard cellular mobile numbers.
            As of February 2016, WhatsApp had a user base of up to one billion,[10] making it the most globally popular messaging application.
            WhatsApp Inc., based in Mountain View, California, was acquired by Facebook Inc. on February 19, 2014, for approximately US$19.3 billion.
        </div>
    </ej-tab>
    <button type="button" (click)="OnClick()">Hide</button>
  • ts
  • import { Component } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html'
    })
    export class DefaultComponent {
        
        constructor() {
           
        }
        OnClick(){
    
        $("#tab").ejTab("hideItem",1); 
    
    }
    }

    removeItem(index)

    Remove the given index tab item.

    Name Type Description
    index number index of tab item.

    Example

  • html
  • <ej-tab id="tab" [allowKeyboardNavigation]=true>
        <ul>
            <li><a href="#twitter">Twitter</a></li>
            <li><a href="#facebook">Facebook</a></li>
            <li><a href="#whatsapp">WhatsApp</a></li>
        </ul>
        <div id="twitter">
            Twitter is an online social networking service that enables users to send and read short 140-character messages called "tweets".
            Registered users can read and post tweets, but those who are unregistered can only read them. Users access Twitter through the website interface, SMS or mobile device app Twitter Inc. is based in San Francisco and has more than 25 offices around the world.
            Twitter was created in March 2006 by Jack Dorsey, Evan Williams, Biz Stone, and Noah Glass and launched in July 2006. The service rapidly gained worldwide popularity, with more than 100 million users posting 340 million tweets a day in 2012.The service also handled 1.6 billion search queries per day.
        </div>
        <div id="facebook">
            Facebook is an online social networking service headquartered in Menlo Park, California. Its website was launched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students Eduardo Saverin, Andrew McCollum, Dustin Moskovitz and Chris Hughes.The founders had initially limited the website's membership to Harvard students, but later expanded it to colleges in the Boston area, the Ivy League, and Stanford University. It gradually added support for students at various other universities and later to high-school students.
        </div>
        <div id="whatsapp">
            WhatsApp Messenger is a proprietary cross-platform instant messaging client for smart phones that operates under a subscription business model. It uses the Internet to send text messages, images, video, user location and audio media messages to other users using standard cellular mobile numbers.
            As of February 2016, WhatsApp had a user base of up to one billion,[10] making it the most globally popular messaging application.
            WhatsApp Inc., based in Mountain View, California, was acquired by Facebook Inc. on February 19, 2014, for approximately US$19.3 billion.
        </div>
    </ej-tab>
    <button type="button" (click)="OnClick()">RemoveItem</button>
  • ts
  • import { Component } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html'
    })
    export class DefaultComponent {
        
        constructor() {
           
        }
        OnClick(){
    
    
    var obj = $("#tab").data("ejTab");
    
    
    obj.removeItem(1);
    
    }
    }
  • html
  • <ej-tab id="tab" [allowKeyboardNavigation]=true>
        <ul>
            <li><a href="#twitter">Twitter</a></li>
            <li><a href="#facebook">Facebook</a></li>
            <li><a href="#whatsapp">WhatsApp</a></li>
        </ul>
        <div id="twitter">
            Twitter is an online social networking service that enables users to send and read short 140-character messages called "tweets".
            Registered users can read and post tweets, but those who are unregistered can only read them. Users access Twitter through the website interface, SMS or mobile device app Twitter Inc. is based in San Francisco and has more than 25 offices around the world.
            Twitter was created in March 2006 by Jack Dorsey, Evan Williams, Biz Stone, and Noah Glass and launched in July 2006. The service rapidly gained worldwide popularity, with more than 100 million users posting 340 million tweets a day in 2012.The service also handled 1.6 billion search queries per day.
        </div>
        <div id="facebook">
            Facebook is an online social networking service headquartered in Menlo Park, California. Its website was launched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students Eduardo Saverin, Andrew McCollum, Dustin Moskovitz and Chris Hughes.The founders had initially limited the website's membership to Harvard students, but later expanded it to colleges in the Boston area, the Ivy League, and Stanford University. It gradually added support for students at various other universities and later to high-school students.
        </div>
        <div id="whatsapp">
            WhatsApp Messenger is a proprietary cross-platform instant messaging client for smart phones that operates under a subscription business model. It uses the Internet to send text messages, images, video, user location and audio media messages to other users using standard cellular mobile numbers.
            As of February 2016, WhatsApp had a user base of up to one billion,[10] making it the most globally popular messaging application.
            WhatsApp Inc., based in Mountain View, California, was acquired by Facebook Inc. on February 19, 2014, for approximately US$19.3 billion.
        </div>
    </ej-tab>
    <button type="button" (click)="OnClick()">RemoveItem</button>
  • ts
  • import { Component } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html'
    })
    export class DefaultComponent {
        
        constructor() {
           
        }
        OnClick(){
    
        $("#tab").ejTab("removeItem",1); 
    
    }
    }

    show()

    This function is to show the tab control.

    Example

  • html
  • <ej-tab id="tab" [allowKeyboardNavigation]=true>
        <ul>
            <li><a href="#twitter">Twitter</a></li>
            <li><a href="#facebook">Facebook</a></li>
            <li><a href="#whatsapp">WhatsApp</a></li>
        </ul>
        <div id="twitter">
            Twitter is an online social networking service that enables users to send and read short 140-character messages called "tweets".
            Registered users can read and post tweets, but those who are unregistered can only read them. Users access Twitter through the website interface, SMS or mobile device app Twitter Inc. is based in San Francisco and has more than 25 offices around the world.
            Twitter was created in March 2006 by Jack Dorsey, Evan Williams, Biz Stone, and Noah Glass and launched in July 2006. The service rapidly gained worldwide popularity, with more than 100 million users posting 340 million tweets a day in 2012.The service also handled 1.6 billion search queries per day.
        </div>
        <div id="facebook">
            Facebook is an online social networking service headquartered in Menlo Park, California. Its website was launched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students Eduardo Saverin, Andrew McCollum, Dustin Moskovitz and Chris Hughes.The founders had initially limited the website's membership to Harvard students, but later expanded it to colleges in the Boston area, the Ivy League, and Stanford University. It gradually added support for students at various other universities and later to high-school students.
        </div>
        <div id="whatsapp">
            WhatsApp Messenger is a proprietary cross-platform instant messaging client for smart phones that operates under a subscription business model. It uses the Internet to send text messages, images, video, user location and audio media messages to other users using standard cellular mobile numbers.
            As of February 2016, WhatsApp had a user base of up to one billion,[10] making it the most globally popular messaging application.
            WhatsApp Inc., based in Mountain View, California, was acquired by Facebook Inc. on February 19, 2014, for approximately US$19.3 billion.
        </div>
    </ej-tab>
    <button type="button" (click)="OnClick()">Show</button>
  • ts
  • import { Component } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html'
    })
    export class DefaultComponent {
        
        constructor() {
           
        }
        OnClick(){
    
    
    var obj = $("#tab").data("ejTab");
    
    
    obj.show();
    
    }
    }
  • html
  • <ej-tab id="tab" [allowKeyboardNavigation]=true>
        <ul>
            <li><a href="#twitter">Twitter</a></li>
            <li><a href="#facebook">Facebook</a></li>
            <li><a href="#whatsapp">WhatsApp</a></li>
        </ul>
        <div id="twitter">
            Twitter is an online social networking service that enables users to send and read short 140-character messages called "tweets".
            Registered users can read and post tweets, but those who are unregistered can only read them. Users access Twitter through the website interface, SMS or mobile device app Twitter Inc. is based in San Francisco and has more than 25 offices around the world.
            Twitter was created in March 2006 by Jack Dorsey, Evan Williams, Biz Stone, and Noah Glass and launched in July 2006. The service rapidly gained worldwide popularity, with more than 100 million users posting 340 million tweets a day in 2012.The service also handled 1.6 billion search queries per day.
        </div>
        <div id="facebook">
            Facebook is an online social networking service headquartered in Menlo Park, California. Its website was launched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students Eduardo Saverin, Andrew McCollum, Dustin Moskovitz and Chris Hughes.The founders had initially limited the website's membership to Harvard students, but later expanded it to colleges in the Boston area, the Ivy League, and Stanford University. It gradually added support for students at various other universities and later to high-school students.
        </div>
        <div id="whatsapp">
            WhatsApp Messenger is a proprietary cross-platform instant messaging client for smart phones that operates under a subscription business model. It uses the Internet to send text messages, images, video, user location and audio media messages to other users using standard cellular mobile numbers.
            As of February 2016, WhatsApp had a user base of up to one billion,[10] making it the most globally popular messaging application.
            WhatsApp Inc., based in Mountain View, California, was acquired by Facebook Inc. on February 19, 2014, for approximately US$19.3 billion.
        </div>
    </ej-tab>
    <button type="button" (click)="OnClick()">Show</button>
  • ts
  • import { Component } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html'
    })
    export class DefaultComponent {
        
        constructor() {
           
        }
        OnClick(){
    
        $("#tab").ejTab("show"); 
    
    }
    }

    showItem(index)

    This function helps to show the specified hidden tab item in tab control.

    Name Type Description
    index number index of tab item.

    Example

  • html
  • <ej-tab id="tab" [allowKeyboardNavigation]=true>
        <ul>
            <li><a href="#twitter">Twitter</a></li>
            <li><a href="#facebook">Facebook</a></li>
            <li><a href="#whatsapp">WhatsApp</a></li>
        </ul>
        <div id="twitter">
            Twitter is an online social networking service that enables users to send and read short 140-character messages called "tweets".
            Registered users can read and post tweets, but those who are unregistered can only read them. Users access Twitter through the website interface, SMS or mobile device app Twitter Inc. is based in San Francisco and has more than 25 offices around the world.
            Twitter was created in March 2006 by Jack Dorsey, Evan Williams, Biz Stone, and Noah Glass and launched in July 2006. The service rapidly gained worldwide popularity, with more than 100 million users posting 340 million tweets a day in 2012.The service also handled 1.6 billion search queries per day.
        </div>
        <div id="facebook">
            Facebook is an online social networking service headquartered in Menlo Park, California. Its website was launched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students Eduardo Saverin, Andrew McCollum, Dustin Moskovitz and Chris Hughes.The founders had initially limited the website's membership to Harvard students, but later expanded it to colleges in the Boston area, the Ivy League, and Stanford University. It gradually added support for students at various other universities and later to high-school students.
        </div>
        <div id="whatsapp">
            WhatsApp Messenger is a proprietary cross-platform instant messaging client for smart phones that operates under a subscription business model. It uses the Internet to send text messages, images, video, user location and audio media messages to other users using standard cellular mobile numbers.
            As of February 2016, WhatsApp had a user base of up to one billion,[10] making it the most globally popular messaging application.
            WhatsApp Inc., based in Mountain View, California, was acquired by Facebook Inc. on February 19, 2014, for approximately US$19.3 billion.
        </div>
    </ej-tab>
    <button type="button" (click)="OnClick()">ShowItem</button>
  • ts
  • import { Component } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html'
    })
    export class DefaultComponent {
        
        constructor() {
           
        }
        OnClick(){
    
    
    var obj = $("#tab").data("ejTab");
    
    
    obj.showItem(1);
    
    }
    }
  • html
  • <ej-tab id="tab" [allowKeyboardNavigation]=true>
        <ul>
            <li><a href="#twitter">Twitter</a></li>
            <li><a href="#facebook">Facebook</a></li>
            <li><a href="#whatsapp">WhatsApp</a></li>
        </ul>
        <div id="twitter">
            Twitter is an online social networking service that enables users to send and read short 140-character messages called "tweets".
            Registered users can read and post tweets, but those who are unregistered can only read them. Users access Twitter through the website interface, SMS or mobile device app Twitter Inc. is based in San Francisco and has more than 25 offices around the world.
            Twitter was created in March 2006 by Jack Dorsey, Evan Williams, Biz Stone, and Noah Glass and launched in July 2006. The service rapidly gained worldwide popularity, with more than 100 million users posting 340 million tweets a day in 2012.The service also handled 1.6 billion search queries per day.
        </div>
        <div id="facebook">
            Facebook is an online social networking service headquartered in Menlo Park, California. Its website was launched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students Eduardo Saverin, Andrew McCollum, Dustin Moskovitz and Chris Hughes.The founders had initially limited the website's membership to Harvard students, but later expanded it to colleges in the Boston area, the Ivy League, and Stanford University. It gradually added support for students at various other universities and later to high-school students.
        </div>
        <div id="whatsapp">
            WhatsApp Messenger is a proprietary cross-platform instant messaging client for smart phones that operates under a subscription business model. It uses the Internet to send text messages, images, video, user location and audio media messages to other users using standard cellular mobile numbers.
            As of February 2016, WhatsApp had a user base of up to one billion,[10] making it the most globally popular messaging application.
            WhatsApp Inc., based in Mountain View, California, was acquired by Facebook Inc. on February 19, 2014, for approximately US$19.3 billion.
        </div>
    </ej-tab>
    <button type="button" (click)="OnClick()">ShowItem</button>
  • ts
  • import { Component } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html'
    })
    export class DefaultComponent {
        
        constructor() {
           
        }
        OnClick(){
    
        $("#tab").ejTab("showItem",1); 
    
    }
    }

    Events

    itemActive

    Triggered after a tab item activated.

    Name Type Description
    argument Object Event parameters from button
    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the tab model.
    type string returns the name of the event.
    prevActiveHeader Element returns previous active tab header.
    prevActiveIndex number returns previous active index.
    activeHeader Element returns current active tab header .
    activeIndex number returns current active index.
    isInteraction boolean returns, is it triggered by interaction or not.

    Example

  • html
  • <ej-tab id="tab" (itemActive)="itemActive($event)">
        <ul>
            <li><a href="#twitter">Twitter</a></li>
            <li><a href="#facebook">Facebook</a></li>
            <li><a href="#whatsapp">WhatsApp</a></li>
        </ul>
        <div id="twitter">
            Twitter is an online social networking service that enables users to send and read short 140-character messages called "tweets".
            Registered users can read and post tweets, but those who are unregistered can only read them. Users access Twitter through the website interface, SMS or mobile device app Twitter Inc. is based in San Francisco and has more than 25 offices around the world.
            Twitter was created in March 2006 by Jack Dorsey, Evan Williams, Biz Stone, and Noah Glass and launched in July 2006. The service rapidly gained worldwide popularity, with more than 100 million users posting 340 million tweets a day in 2012.The service also handled 1.6 billion search queries per day.
        </div>
        <div id="facebook">
            Facebook is an online social networking service headquartered in Menlo Park, California. Its website was launched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students Eduardo Saverin, Andrew McCollum, Dustin Moskovitz and Chris Hughes.The founders had initially limited the website's membership to Harvard students, but later expanded it to colleges in the Boston area, the Ivy League, and Stanford University. It gradually added support for students at various other universities and later to high-school students.
        </div>
        <div id="whatsapp">
            WhatsApp Messenger is a proprietary cross-platform instant messaging client for smart phones that operates under a subscription business model. It uses the Internet to send text messages, images, video, user location and audio media messages to other users using standard cellular mobile numbers.
            As of February 2016, WhatsApp had a user base of up to one billion,[10] making it the most globally popular messaging application.
            WhatsApp Inc., based in Mountain View, California, was acquired by Facebook Inc. on February 19, 2014, for approximately US$19.3 billion.
        </div>
    </ej-tab>
  • ts
  • import { Component } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html'
    })
    export class DefaultComponent {
        
        constructor() {
           
        }
        itemActive(args){
    
    }
    }

    ajaxBeforeLoad

    Triggered before AJAX content has been loaded.

    Name Type Description
    argument Object Event parameters from button
    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the tab model.
    type string returns the name of the event.
    prevActiveHeader Element returns previous active tab header.
    prevActiveIndex number returns previous active index.
    activeHeader Element returns current active tab header .
    activeIndex number returns current active index.
    URL string returns the URL of AJAX request
    isInteraction boolean returns, is it triggered by interaction or not.

    Example

  • html
  • <div id="dish" style="width: 650px">
    <ej-tab id="dishtype">
        <ul>
            <li><a href="#pizza">Pizza Menu</a></li>
            <li><a href="#sandwich">Sandwich Menu</a></li>
        </ul>
        <div id="pizza" style="background-color: #F5F5F5">
            <p>Pizza cooked to perfection tossed with milk, vegetables, potatoes, poultry, 100% pure mutton, and cheese - and in creating nutritious and tasty meals to maintain good health.</p>
            <div id="pizza">
            <ej-tab id="pizza" [ajaxSettings.dataType]="dataType" [ajaxSettings.contentType]="contentType" [ajaxSettings.async]="async" [ajaxSettings.data]="data" [ajaxSettings.type]="type" [ajaxSettings.cache]="cache" (ajaxBeforeLoad)="ajaxBeforeLoad($event)">
                <ul>
                    <li>
                        <a href="content/cornSpinach.html">Corn & Spinach </a></li>
                    <li>
                        <a href="Content/chickenDelite.html">Chicken Delite </a></li>
                </ul>
            </ej-tab>
            </div>
        </div>
        <div id="sandwich" style="background-color: #F5F5F5">
            <p>Sandwich cooked to perfection tossed with bread, milk, vegetables, potatoes, poultry, 100% pure mutton, and cheese - and in creating nutritious and tasty meals to maintain good health.</p>
            <div id="sandwich">
            <ej-tab id="sandwich" [ajaxSettings.dataType]="dataType" [ajaxSettings.contentType]="contentType" [ajaxSettings.async]="async" [ajaxSettings.data]="data" [ajaxSettings.type]="type" [ajaxSettings.cache]="cache" (ajaxBeforeLoad)="ajaxBeforeLoad($event)">
                <ul>
                    <li>
                        <a href="Content/gardenVeggie.html">Garden Veggie </a></li>
                    <li>
                        <a href="Content/chickenTikka.html">Chicken Tikka </a></li>
                    <li>
                        <a href="Content/paneerTikka.html">Paneer Tikka </a></li>
                </ul>
                </ej-tab>
            </div>
        </div>
        </ej-tab>
    </div>
  • ts
  • import { Component } from '@angular/core';
    import { ViewEncapsulation } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './tab.component.html',
        styleUrls: ['./tab.component.css'],
        encapsulation: ViewEncapsulation.None,
    })
    export class ScrollTabComponent {
        dataType: any;
    
    contentType: any;
    
    async: any;
        cache: any;
        data: Object;
        type: any;
        constructor() {
            this.cache= false;
            this.data= {};
            this.type= 'GET';
        
    this.dataType= "html";
    
    
    this.contentType= "html";
    
    
    this.async= true;
        }
        ajaxBeforeLoad(args){
    
        }
    }

    The file ‘cornSpinach.html’ content is as follows.

  • html
  • <div class="e-content">
            <img src="http://js.syncfusion.com/demos/web/images/accordion/corn-and-spinach-05.png" alt="corn-spinach"/>
            <div class="ingredients">
                Rate    : $70<br />
                Ingredients : cheese, sweet corn &amp; green capsicums.
                    <br />
                Description: Small pizza bases are topped with spinach and Paneer and fresh cream, a nice layer of mozzarella cheese. This is baked until the cheese is all hot and gooey.                   
            </div>
        </div>

    The file ‘chickenDelite.html’ content is as follows.

  • html
  • <div class="e-content">
            <img src="http://js.syncfusion.com/demos/web/images/accordion/chicken-delite.png" alt="chicken-delite"/>
            <div class="ingredients">
                Rate    : $100<br />
                Ingredients : cheese, chicken chunks, onions &amp; pineapple chunks.  
                <br />
                Description: This is a tasty, elegant chicken dish that is easy to prepare.
            </div>
        </div>

    ajaxError

    Triggered if error occurs in AJAX request.

    Name Type Description
    argument object Event parameters from button
    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the tab model.
    type string returns the name of the event.
    data object returns AJAX data details.
    URL string returns the URL of AJAX request.

    Example

  • html
  • <div id="dish" style="width: 650px">
    <ej-tab id="dishtype">
        <ul>
            <li><a href="#pizza">Pizza Menu</a></li>
            <li><a href="#sandwich">Sandwich Menu</a></li>
        </ul>
        <div id="pizza" style="background-color: #F5F5F5">
            <p>Pizza cooked to perfection tossed with milk, vegetables, potatoes, poultry, 100% pure mutton, and cheese - and in creating nutritious and tasty meals to maintain good health.</p>
            <div id="pizza">
            <ej-tab id="pizza" [ajaxSettings.dataType]="dataType" [ajaxSettings.contentType]="contentType" [ajaxSettings.async]="async" [ajaxSettings.data]="data" [ajaxSettings.type]="type" [ajaxSettings.cache]="cache" (ajaxError)="ajaxError($event)">
                <ul>
                    <li>
                        <a href="content/cornSpinach.html">Corn & Spinach </a></li>
                    <li>
                        <a href="Content/chickenDelite.html">Chicken Delite </a></li>
                </ul>
            </ej-tab>
            </div>
        </div>
        <div id="sandwich" style="background-color: #F5F5F5">
            <p>Sandwich cooked to perfection tossed with bread, milk, vegetables, potatoes, poultry, 100% pure mutton, and cheese - and in creating nutritious and tasty meals to maintain good health.</p>
            <div id="sandwich">
            <ej-tab id="sandwich" [ajaxSettings.dataType]="dataType" [ajaxSettings.contentType]="contentType" [ajaxSettings.async]="async" [ajaxSettings.data]="data" [ajaxSettings.type]="type" [ajaxSettings.cache]="cache" (ajaxError)="ajaxError($event)">
                <ul>
                    <li>
                        <a href="Content/gardenVeggie.html">Garden Veggie </a></li>
                    <li>
                        <a href="Content/chickenTikka.html">Chicken Tikka </a></li>
                    <li>
                        <a href="Content/paneerTikka.html">Paneer Tikka </a></li>
                </ul>
                </ej-tab>
            </div>
        </div>
        </ej-tab>
    </div>
  • ts
  • import { Component } from '@angular/core';
    import { ViewEncapsulation } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './tab.component.html',
        styleUrls: ['./tab.component.css'],
        encapsulation: ViewEncapsulation.None,
    })
    export class ScrollTabComponent {
        dataType: any;
    
    contentType: any;
    
    async: any;
        cache: any;
        data: Object;
        type: any;
        constructor() {
            this.cache= false;
            this.data= {};
            this.type= 'GET';
        
    this.dataType= "html";
    
    
    this.contentType= "html";
    
    
    this.async= true;
        }
        ajaxError(args){}
    }

    The file ‘cornSpinach.html’ content is as follows.

  • html
  • <div class="e-content">
            <img src="http://js.syncfusion.com/demos/web/images/accordion/corn-and-spinach-05.png" alt="corn-spinach"/>
            <div class="ingredients">
                Rate    : $70<br />
                Ingredients : cheese, sweet corn &amp; green capsicums.
                    <br />
                Description: Small pizza bases are topped with spinach and Paneer and fresh cream, a nice layer of mozzarella cheese. This is baked until the cheese is all hot and gooey.                   
            </div>
        </div>

    The file ‘chickenDelite.html’ content is as follows.

  • html
  • <div class="e-content">
            <img src="http://js.syncfusion.com/demos/web/images/accordion/chicken-delite.png" alt="chicken-delite"/>
            <div class="ingredients">
                Rate    : $100<br />
                Ingredients : cheese, chicken chunks, onions &amp; pineapple chunks.  
                <br />
                Description: This is a tasty, elegant chicken dish that is easy to prepare.
            </div>
        </div>

    ajaxLoad

    Triggered after AJAX content load action.

    Name Type Description
    argument object Event parameters from button
    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the tab model.
    type string returns the name of the event.
    prevActiveHeader Element returns previous active tab header.
    prevActiveIndex number returns previous active index.
    activeHeader Element returns current active tab header .
    activeIndex number returns current active index.
    URL string returns the URL of AJAX request
    isInteraction boolean returns, is it triggered by interaction or not.

    Example

  • html
  • <div id="dish" style="width: 650px">
    <ej-tab id="dishtype">
        <ul>
            <li><a href="#pizza">Pizza Menu</a></li>
            <li><a href="#sandwich">Sandwich Menu</a></li>
        </ul>
        <div id="pizza" style="background-color: #F5F5F5">
            <p>Pizza cooked to perfection tossed with milk, vegetables, potatoes, poultry, 100% pure mutton, and cheese - and in creating nutritious and tasty meals to maintain good health.</p>
            <div id="pizza">
            <ej-tab id="pizza" [ajaxSettings.dataType]="dataType" [ajaxSettings.contentType]="contentType" [ajaxSettings.async]="async" [ajaxSettings.data]="data" [ajaxSettings.type]="type" [ajaxSettings.cache]="cache" (ajaxLoad)="ajaxLoad($event)">
                <ul>
                    <li>
                        <a href="content/cornSpinach.html">Corn & Spinach </a></li>
                    <li>
                        <a href="Content/chickenDelite.html">Chicken Delite </a></li>
                </ul>
            </ej-tab>
            </div>
        </div>
        <div id="sandwich" style="background-color: #F5F5F5">
            <p>Sandwich cooked to perfection tossed with bread, milk, vegetables, potatoes, poultry, 100% pure mutton, and cheese - and in creating nutritious and tasty meals to maintain good health.</p>
            <div id="sandwich">
            <ej-tab id="sandwich" [ajaxSettings.dataType]="dataType" [ajaxSettings.contentType]="contentType" [ajaxSettings.async]="async" [ajaxSettings.data]="data" [ajaxSettings.type]="type" [ajaxSettings.cache]="cache" (ajaxLoad)="ajaxLoad($event)">
                <ul>
                    <li>
                        <a href="Content/gardenVeggie.html">Garden Veggie </a></li>
                    <li>
                        <a href="Content/chickenTikka.html">Chicken Tikka </a></li>
                    <li>
                        <a href="Content/paneerTikka.html">Paneer Tikka </a></li>
                </ul>
                </ej-tab>
            </div>
        </div>
        </ej-tab>
    </div>
  • ts
  • import { Component } from '@angular/core';
    import { ViewEncapsulation } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './tab.component.html',
        styleUrls: ['./tab.component.css'],
        encapsulation: ViewEncapsulation.None,
    })
    export class ScrollTabComponent {
        dataType: any;
    
    contentType: any;
    
    async: any;
        cache: any;
        data: Object;
        type: any;
        constructor() {
            this.cache= false;
            this.data= {};
            this.type= 'GET';
        
    this.dataType= "html";
    
    
    this.contentType= "html";
    
    
    this.async= true;
        }
        ajaxLoad(args){
            
        }
    }

    The file ‘cornSpinach.html’ content is as follows.

  • html
  • <div class="e-content">
            <img src="http://js.syncfusion.com/demos/web/images/accordion/corn-and-spinach-05.png" alt="corn-spinach"/>
            <div class="ingredients">
                Rate    : $70<br />
                Ingredients : cheese, sweet corn &amp; green capsicums.
                    <br />
                Description: Small pizza bases are topped with spinach and Paneer and fresh cream, a nice layer of mozzarella cheese. This is baked until the cheese is all hot and gooey.                   
            </div>
        </div>

    The file ‘chickenDelite.html’ content is as follows.

  • html
  • <div class="e-content">
            <img src="http://js.syncfusion.com/demos/web/images/accordion/chicken-delite.png" alt="chicken-delite"/>
            <div class="ingredients">
                Rate    : $100<br />
                Ingredients : cheese, chicken chunks, onions &amp; pineapple chunks.  
                <br />
                Description: This is a tasty, elegant chicken dish that is easy to prepare.
            </div>
        </div>

    ajaxSuccess

    Triggered after a tab item activated.

    Name Type Description
    argument Object Event parameters from button
    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the tab model.
    type string returns the name of the event.
    data object return AJAX data.
    URL string returns AJAX URL
    content object returns content of AJAX request.

    Example

  • html
  • <div id="dish" style="width: 650px">
    <ej-tab id="dishtype">
        <ul>
            <li><a href="#pizza">Pizza Menu</a></li>
            <li><a href="#sandwich">Sandwich Menu</a></li>
        </ul>
        <div id="pizza" style="background-color: #F5F5F5">
            <p>Pizza cooked to perfection tossed with milk, vegetables, potatoes, poultry, 100% pure mutton, and cheese - and in creating nutritious and tasty meals to maintain good health.</p>
            <div id="pizza">
            <ej-tab id="pizza" [ajaxSettings.dataType]="dataType" [ajaxSettings.contentType]="contentType" [ajaxSettings.async]="async" [ajaxSettings.data]="data" [ajaxSettings.type]="type" [ajaxSettings.cache]="cache" (ajaxSuccess)="ajaxSuccess($event)">
                <ul>
                    <li>
                        <a href="content/cornSpinach.html">Corn & Spinach </a></li>
                    <li>
                        <a href="Content/chickenDelite.html">Chicken Delite </a></li>
                </ul>
            </ej-tab>
            </div>
        </div>
        <div id="sandwich" style="background-color: #F5F5F5">
            <p>Sandwich cooked to perfection tossed with bread, milk, vegetables, potatoes, poultry, 100% pure mutton, and cheese - and in creating nutritious and tasty meals to maintain good health.</p>
            <div id="sandwich">
            <ej-tab id="sandwich" [ajaxSettings.dataType]="dataType" [ajaxSettings.contentType]="contentType" [ajaxSettings.async]="async" [ajaxSettings.data]="data" [ajaxSettings.type]="type" [ajaxSettings.cache]="cache" (ajaxSuccess)="ajaxSuccess($event)">
                <ul>
                    <li>
                        <a href="Content/gardenVeggie.html">Garden Veggie </a></li>
                    <li>
                        <a href="Content/chickenTikka.html">Chicken Tikka </a></li>
                    <li>
                        <a href="Content/paneerTikka.html">Paneer Tikka </a></li>
                </ul>
                </ej-tab>
            </div>
        </div>
        </ej-tab>
    </div>
  • ts
  • import { Component } from '@angular/core';
    import { ViewEncapsulation } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './tab.component.html',
        styleUrls: ['./tab.component.css'],
        encapsulation: ViewEncapsulation.None,
    })
    export class ScrollTabComponent {
        dataType: any;
    
    contentType: any;
    
    async: any;
        cache: any;
        data: Object;
        type: any;
        constructor() {
            this.cache= false;
            this.data= {};
            this.type= 'GET';
        
    this.dataType= "html";
    
    
    this.contentType= "html";
    
    
    this.async= true;
        }
        ajaxSuccess(args){}
    }

    The file ‘cornSpinach.html’ content is as follows.

  • html
  • <div class="e-content">
            <img src="http://js.syncfusion.com/demos/web/images/accordion/corn-and-spinach-05.png" alt="corn-spinach"/>
            <div class="ingredients">
                Rate    : $70<br />
                Ingredients : cheese, sweet corn &amp; green capsicums.
                    <br />
                Description: Small pizza bases are topped with spinach and Paneer and fresh cream, a nice layer of mozzarella cheese. This is baked until the cheese is all hot and gooey.                   
            </div>
        </div>

    The file ‘chickenDelite.html’ content is as follows.

  • html
  • <div class="e-content">
            <img src="http://js.syncfusion.com/demos/web/images/accordion/chicken-delite.png" alt="chicken-delite"/>
            <div class="ingredients">
                Rate    : $100<br />
                Ingredients : cheese, chicken chunks, onions &amp; pineapple chunks.  
                <br />
                Description: This is a tasty, elegant chicken dish that is easy to prepare.
            </div>
        </div>

    beforeActive

    Triggered before a tab item activated.

    Name Type Description
    argument Object Event parameters from button
    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the tab model.
    type string returns the name of the event.
    prevActiveHeader Element returns previous active tab header.
    prevActiveIndex number returns previous active index.
    activeHeader Element returns current active tab header .
    activeIndex number returns current active index.
    isInteraction boolean returns, is it triggered by interaction or not.

    Example

  • html
  • <ej-tab id="tab" (beforeActive)="beforeActive($event)">
        <ul>
            <li><a href="#twitter">Twitter</a></li>
            <li><a href="#facebook">Facebook</a></li>
            <li><a href="#whatsapp">WhatsApp</a></li>
        </ul>
        <div id="twitter">
            Twitter is an online social networking service that enables users to send and read short 140-character messages called "tweets".
            Registered users can read and post tweets, but those who are unregistered can only read them. Users access Twitter through the website interface, SMS or mobile device app Twitter Inc. is based in San Francisco and has more than 25 offices around the world.
            Twitter was created in March 2006 by Jack Dorsey, Evan Williams, Biz Stone, and Noah Glass and launched in July 2006. The service rapidly gained worldwide popularity, with more than 100 million users posting 340 million tweets a day in 2012.The service also handled 1.6 billion search queries per day.
        </div>
        <div id="facebook">
            Facebook is an online social networking service headquartered in Menlo Park, California. Its website was launched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students Eduardo Saverin, Andrew McCollum, Dustin Moskovitz and Chris Hughes.The founders had initially limited the website's membership to Harvard students, but later expanded it to colleges in the Boston area, the Ivy League, and Stanford University. It gradually added support for students at various other universities and later to high-school students.
        </div>
        <div id="whatsapp">
            WhatsApp Messenger is a proprietary cross-platform instant messaging client for smart phones that operates under a subscription business model. It uses the Internet to send text messages, images, video, user location and audio media messages to other users using standard cellular mobile numbers.
            As of February 2016, WhatsApp had a user base of up to one billion,[10] making it the most globally popular messaging application.
            WhatsApp Inc., based in Mountain View, California, was acquired by Facebook Inc. on February 19, 2014, for approximately US$19.3 billion.
        </div>
    </ej-tab>
  • ts
  • import { Component } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html'
    })
    export class DefaultComponent {
        
        constructor() {
           
        }
        beforeActive(args){
    
    }
    }

    beforeItemRemove

    Triggered before a tab item remove.

    Name Type Description
    argument Object Event parameters from button.
    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the tab model.
    type string returns the name of the event.
    index number returns current tab item index

    Example

  • html
  • <ej-tab id="tab" (beforeItemRemove)="beforeItemRemove($event)">
        <ul>
            <li><a href="#twitter">Twitter</a></li>
            <li><a href="#facebook">Facebook</a></li>
            <li><a href="#whatsapp">WhatsApp</a></li>
        </ul>
        <div id="twitter">
            Twitter is an online social networking service that enables users to send and read short 140-character messages called "tweets".
            Registered users can read and post tweets, but those who are unregistered can only read them. Users access Twitter through the website interface, SMS or mobile device app Twitter Inc. is based in San Francisco and has more than 25 offices around the world.
            Twitter was created in March 2006 by Jack Dorsey, Evan Williams, Biz Stone, and Noah Glass and launched in July 2006. The service rapidly gained worldwide popularity, with more than 100 million users posting 340 million tweets a day in 2012.The service also handled 1.6 billion search queries per day.
        </div>
        <div id="facebook">
            Facebook is an online social networking service headquartered in Menlo Park, California. Its website was launched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students Eduardo Saverin, Andrew McCollum, Dustin Moskovitz and Chris Hughes.The founders had initially limited the website's membership to Harvard students, but later expanded it to colleges in the Boston area, the Ivy League, and Stanford University. It gradually added support for students at various other universities and later to high-school students.
        </div>
        <div id="whatsapp">
            WhatsApp Messenger is a proprietary cross-platform instant messaging client for smart phones that operates under a subscription business model. It uses the Internet to send text messages, images, video, user location and audio media messages to other users using standard cellular mobile numbers.
            As of February 2016, WhatsApp had a user base of up to one billion,[10] making it the most globally popular messaging application.
            WhatsApp Inc., based in Mountain View, California, was acquired by Facebook Inc. on February 19, 2014, for approximately US$19.3 billion.
        </div>
    </ej-tab>
  • ts
  • import { Component } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html'
    })
    export class DefaultComponent {
        
        constructor() {
           
        }
        beforeItemRemove(args){
    
    }
    }

    create

    Triggered before a tab item Create.

    Name Type Description
    argument Object Event parameters from button.
    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the tab model.
    type string returns the name of the event.

    Example

  • html
  • <ej-tab id="tab" (create)="create($event)">
        <ul>
            <li><a href="#twitter">Twitter</a></li>
            <li><a href="#facebook">Facebook</a></li>
            <li><a href="#whatsapp">WhatsApp</a></li>
        </ul>
        <div id="twitter">
            Twitter is an online social networking service that enables users to send and read short 140-character messages called "tweets".
            Registered users can read and post tweets, but those who are unregistered can only read them. Users access Twitter through the website interface, SMS or mobile device app Twitter Inc. is based in San Francisco and has more than 25 offices around the world.
            Twitter was created in March 2006 by Jack Dorsey, Evan Williams, Biz Stone, and Noah Glass and launched in July 2006. The service rapidly gained worldwide popularity, with more than 100 million users posting 340 million tweets a day in 2012.The service also handled 1.6 billion search queries per day.
        </div>
        <div id="facebook">
            Facebook is an online social networking service headquartered in Menlo Park, California. Its website was launched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students Eduardo Saverin, Andrew McCollum, Dustin Moskovitz and Chris Hughes.The founders had initially limited the website's membership to Harvard students, but later expanded it to colleges in the Boston area, the Ivy League, and Stanford University. It gradually added support for students at various other universities and later to high-school students.
        </div>
        <div id="whatsapp">
            WhatsApp Messenger is a proprietary cross-platform instant messaging client for smart phones that operates under a subscription business model. It uses the Internet to send text messages, images, video, user location and audio media messages to other users using standard cellular mobile numbers.
            As of February 2016, WhatsApp had a user base of up to one billion,[10] making it the most globally popular messaging application.
            WhatsApp Inc., based in Mountain View, California, was acquired by Facebook Inc. on February 19, 2014, for approximately US$19.3 billion.
        </div>
    </ej-tab>
  • ts
  • import { Component } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html'
    })
    export class DefaultComponent {
        
        constructor() {
           
        }
        create(args){
    
    }
    }

    destroy

    Triggered before a tab item destroy.

    Name Type Description
    Object Event parameters from button.
    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the tab model.
    type string returns the name of the event.

    Example

  • html
  • <ej-tab id="tab" (destroy)="destroy($event)">
        <ul>
            <li><a href="#twitter">Twitter</a></li>
            <li><a href="#facebook">Facebook</a></li>
            <li><a href="#whatsapp">WhatsApp</a></li>
        </ul>
        <div id="twitter">
            Twitter is an online social networking service that enables users to send and read short 140-character messages called "tweets".
            Registered users can read and post tweets, but those who are unregistered can only read them. Users access Twitter through the website interface, SMS or mobile device app Twitter Inc. is based in San Francisco and has more than 25 offices around the world.
            Twitter was created in March 2006 by Jack Dorsey, Evan Williams, Biz Stone, and Noah Glass and launched in July 2006. The service rapidly gained worldwide popularity, with more than 100 million users posting 340 million tweets a day in 2012.The service also handled 1.6 billion search queries per day.
        </div>
        <div id="facebook">
            Facebook is an online social networking service headquartered in Menlo Park, California. Its website was launched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students Eduardo Saverin, Andrew McCollum, Dustin Moskovitz and Chris Hughes.The founders had initially limited the website's membership to Harvard students, but later expanded it to colleges in the Boston area, the Ivy League, and Stanford University. It gradually added support for students at various other universities and later to high-school students.
        </div>
        <div id="whatsapp">
            WhatsApp Messenger is a proprietary cross-platform instant messaging client for smart phones that operates under a subscription business model. It uses the Internet to send text messages, images, video, user location and audio media messages to other users using standard cellular mobile numbers.
            As of February 2016, WhatsApp had a user base of up to one billion,[10] making it the most globally popular messaging application.
            WhatsApp Inc., based in Mountain View, California, was acquired by Facebook Inc. on February 19, 2014, for approximately US$19.3 billion.
        </div>
    </ej-tab>
  • ts
  • import { Component } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html'
    })
    export class DefaultComponent {
        
        constructor() {
           
        }
        destroy(args){
    
    }
    }

    itemAdd

    Triggered after new tab item add

    Name Type Description
    argument Object Event parameters from button
    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the tab model.
    type string returns the name of the event.
    tabHeader Element returns new added tab header.
    tabContent object returns new added tab content panel.

    Example

  • html
  • <ej-tab id="tab" (itemAdd)="itemAdd($event)">
        <ul>
            <li><a href="#twitter">Twitter</a></li>
            <li><a href="#facebook">Facebook</a></li>
            <li><a href="#whatsapp">WhatsApp</a></li>
        </ul>
        <div id="twitter">
            Twitter is an online social networking service that enables users to send and read short 140-character messages called "tweets".
            Registered users can read and post tweets, but those who are unregistered can only read them. Users access Twitter through the website interface, SMS or mobile device app Twitter Inc. is based in San Francisco and has more than 25 offices around the world.
            Twitter was created in March 2006 by Jack Dorsey, Evan Williams, Biz Stone, and Noah Glass and launched in July 2006. The service rapidly gained worldwide popularity, with more than 100 million users posting 340 million tweets a day in 2012.The service also handled 1.6 billion search queries per day.
        </div>
        <div id="facebook">
            Facebook is an online social networking service headquartered in Menlo Park, California. Its website was launched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students Eduardo Saverin, Andrew McCollum, Dustin Moskovitz and Chris Hughes.The founders had initially limited the website's membership to Harvard students, but later expanded it to colleges in the Boston area, the Ivy League, and Stanford University. It gradually added support for students at various other universities and later to high-school students.
        </div>
        <div id="whatsapp">
            WhatsApp Messenger is a proprietary cross-platform instant messaging client for smart phones that operates under a subscription business model. It uses the Internet to send text messages, images, video, user location and audio media messages to other users using standard cellular mobile numbers.
            As of February 2016, WhatsApp had a user base of up to one billion,[10] making it the most globally popular messaging application.
            WhatsApp Inc., based in Mountain View, California, was acquired by Facebook Inc. on February 19, 2014, for approximately US$19.3 billion.
        </div>
    </ej-tab>
  • ts
  • import { Component } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html'
    })
    export class DefaultComponent {
        
        constructor() {
           
        }
        itemAdd(args){
    
    }
    }

    itemRemove

    Triggered after tab item removed.

    Name Type Description
    argument Object Event parameters from button
    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the tab model.
    type string returns the name of the event.
    removedTab Element returns removed tab header.

    Example

  • html
  • <ej-tab id="tab" (itemActive)="itemRemove($event)">
        <ul>
            <li><a href="#twitter">Twitter</a></li>
            <li><a href="#facebook">Facebook</a></li>
            <li><a href="#whatsapp">WhatsApp</a></li>
        </ul>
        <div id="twitter">
            Twitter is an online social networking service that enables users to send and read short 140-character messages called "tweets".
            Registered users can read and post tweets, but those who are unregistered can only read them. Users access Twitter through the website interface, SMS or mobile device app Twitter Inc. is based in San Francisco and has more than 25 offices around the world.
            Twitter was created in March 2006 by Jack Dorsey, Evan Williams, Biz Stone, and Noah Glass and launched in July 2006. The service rapidly gained worldwide popularity, with more than 100 million users posting 340 million tweets a day in 2012.The service also handled 1.6 billion search queries per day.
        </div>
        <div id="facebook">
            Facebook is an online social networking service headquartered in Menlo Park, California. Its website was launched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students Eduardo Saverin, Andrew McCollum, Dustin Moskovitz and Chris Hughes.The founders had initially limited the website's membership to Harvard students, but later expanded it to colleges in the Boston area, the Ivy League, and Stanford University. It gradually added support for students at various other universities and later to high-school students.
        </div>
        <div id="whatsapp">
            WhatsApp Messenger is a proprietary cross-platform instant messaging client for smart phones that operates under a subscription business model. It uses the Internet to send text messages, images, video, user location and audio media messages to other users using standard cellular mobile numbers.
            As of February 2016, WhatsApp had a user base of up to one billion,[10] making it the most globally popular messaging application.
            WhatsApp Inc., based in Mountain View, California, was acquired by Facebook Inc. on February 19, 2014, for approximately US$19.3 billion.
        </div>
    </ej-tab>
  • ts
  • import { Component } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html'
    })
    export class DefaultComponent {
        
        constructor() {
           
        }
        itemRemove(args){
    
    }
    }