Angular API

ejTab

3 Aug 201824 minutes to read

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

<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

<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>

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.

<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.

<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

<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>

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

<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>

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

<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>

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.

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

disabledItemIndex `number[]`

Disables the given tab headers and content panels.

Default Value

[]

Example

<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>

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

<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>

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

<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>

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

<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>

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

<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>

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

<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>

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

<<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>

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

<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>

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

<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>

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

<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>

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

<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>

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

<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>

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

<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>

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

<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>

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

<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>

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

<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>

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

<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>

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

<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>

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

<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>

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

<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>

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

<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>

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");

}
}

<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>

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

<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>

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();

}
}

<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>

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

<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>

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();

}
}

<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>

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

<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>

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();

}
}

<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>

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

<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>

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();

}
}

<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>

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

<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>

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);

}
}

<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>

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

<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>

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);

}
}

<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>

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

<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>

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();

}
}

<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>

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

<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>

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);

}
}

<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>

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

<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>

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

<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>

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.

<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.

<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

<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>

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.

<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.

<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

<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>

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.

<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.

<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

<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>

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.

<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.

<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

<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>

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

<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>

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

<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>

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

<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>

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

<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>

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

<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>

import { Component } from '@angular/core';

@Component({
    selector: 'ej-app',
    templateUrl: './default.component.html'
})
export class DefaultComponent {
    
    constructor() {
       
    }
    itemRemove(args){

}
}