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.

{% highlight html %}

• Twitter
• Facebook
• WhatsApp

{% endhighlight %}

• module:jQuery

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

• module:ej.core.js

• module:ej.tab.js

{:#members:ajaxsettings}

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

{% highlight html %}

{% endhighlight %}

{% highlight ts %}

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

@Component({ selector: 'ej-app', templateUrl: './tab.component.html', styleUrls: ['./tab.component.css'], encapsulation: ViewEncapsulation.None, }) export class ScrollTabComponent { dataType: any;

contentType: any;

async: any; cache: any; data: Object; type: any; constructor() { this.cache= false; this.data= {}; this.type= 'GET';

this.dataType= "html";

this.contentType= "html";

this.async= true; } }

{% endhighlight %}

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

{% highlight html %}

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

{% endhighlight %}

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

{% highlight html %}

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

{% endhighlight %}

{:#members:ajaxsettings-async}

It specifies, whether to enable or disable asynchronous request.

• true

{:#members:ajaxsettings-cache}

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

• false

{:#members:ajaxsettings-contenttype}

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

• "html"

{:#members:ajaxsettings-data}

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

• {}

{:#members:ajaxsettings-datatype}

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

• "html"

{:#members:ajaxsettings-type}

It specifies the HTTP request type.

• "get"

{:#members:allowkeyboardnavigation}

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

• true

{% highlight html %}

<ej-tab id="tab" [allowKeyboardNavigation]=true>

• Twitter
• Facebook
• WhatsApp

{% endhighlight %}

{% highlight ts %}

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

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

constructor() {
   
}

}

{% endhighlight %}

{:#members:collapsible}

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

• false

{% highlight html %}

<ej-tab id="tab" [collapsible]=true>

• Twitter
• Facebook
• WhatsApp

{% endhighlight %}

{% highlight ts %}

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

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

constructor() {
   
}

}

{% endhighlight %}

{:#members:cssclass}

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

• ""

{% highlight html %}

• Twitter
• Facebook
• WhatsApp

{% endhighlight %}

{% highlight ts %}

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

@Component({ selector: 'ej-app', templateUrl: './default.component.html', styleUrls: ['./tab.component.css'], encapsulation: ViewEncapsulation.None, }) export class DefaultComponent {

constructor() {
   
}

}

{% endhighlight %}

The css must be defined in stylesheet.

{% highlight ts %}

{% endhighlight %}

{:#members:disableditemindex}

Disables the given tab headers and content panels.

• []

{% highlight html %}

<ej-tab id="tab" [disabledItemIndex]="disabledItemIndex">

• Twitter
• Facebook
• WhatsApp

{% endhighlight %}

{% highlight ts %}

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

@Component({ selector: 'ej-app', templateUrl: './default.component.html' }) export class DefaultComponent { disabledItemIndex: array; constructor() { this.disabledItemIndex = [1,2]; } }

{% endhighlight %}

{:#members:enableanimation}

Specifies the animation behavior of the tab.

• true

{% highlight html %}

<ej-tab id="tab" [enableAnimation]=true>

• Twitter
• Facebook
• WhatsApp

{% endhighlight %}

{% highlight ts %}

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

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

constructor() {
   
}

}

{% endhighlight %}

{:#members:enabled}

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

• true

{% highlight html %}

<ej-tab id="tab" [enabled]=true>

• Twitter
• Facebook
• WhatsApp

{% endhighlight %}

{% highlight ts %}

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

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

constructor() {
   
}

}

{% endhighlight %}

{:#members:enableditemindex}

Enables the given tab headers and content panels.

• []

{% highlight html %}

<ej-tab id="tab" [enabledItemIndex]="enabledItemIndex" [disabledItemIndex]="disabledItemIndex">

• Twitter
• Facebook
• WhatsApp

{% endhighlight %}

{% highlight ts %}

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

@Component({ selector: 'ej-app', templateUrl: './default.component.html' }) export class DefaultComponent { enabledItemIndex: any; enabledItemIndex: any; constructor() { this.disabledItemIndex = [0,1]; this.enabledItemIndex = [0,1]; } }

{% endhighlight %}

{:#members:enablepersistence}

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

• false

{% highlight html %}

<ej-tab id="tab" [enablePersistence]=true>

• Twitter
• Facebook
• WhatsApp

{% endhighlight %}

{% highlight ts %}

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

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

constructor() {
   
}

}

{% endhighlight %}

{:#members:enablertl}

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

• false

{% highlight html %}

<ej-tab id="tab" [enableRTL]=true>

• Twitter
• Facebook
• WhatsApp

{% endhighlight %}

{% highlight ts %}

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

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

constructor() {
   
}

}

{% endhighlight %}

{:#members:enabletabscroll}

Specify to enable scrolling for Tab header.

• false

{% highlight ts %}

<

{% endhighlight %}

{% highlight ts %}

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

@Component({ selector: 'ej-app', templateUrl: './tab.component.html', styleUrls: ['./tab.component.css'], encapsulation: ViewEncapsulation.None, }) export class ScrollTabComponent { enableTabScroll:boolean; constructor() { this.enableTabScroll=true; } }

{% endhighlight %}

{:#members:events}

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

• "click"

{% highlight html %}

• Twitter
• Facebook
• WhatsApp

{% endhighlight %}

{% highlight ts %}

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

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

constructor() {
   
}

}

{% endhighlight %}

{:#members:headerposition}

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

• "top"

{% highlight html %}

• Twitter
• Facebook
• WhatsApp

{% endhighlight %}

{% highlight ts %}

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

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

constructor() {
   
}

}

{% endhighlight %}

{:#members:headersize}

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

• null

{% highlight html %}

• Twitter
• Facebook
• WhatsApp

{% endhighlight %}

{% highlight ts %}

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

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

constructor() {
   
}

}

{% endhighlight %}

{:#members:height}

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

• null

{% highlight html %}

• Twitter
• Facebook
• WhatsApp

{% endhighlight %}

{% highlight ts %}

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

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

constructor() {
   
}

}

{% endhighlight %}

{:#members:heightadjustmode}

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

• "content"

{% highlight html %}

• Twitter
• Facebook
• WhatsApp

{% endhighlight %}

{% highlight ts %}

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

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

constructor() {
   
}

}

{% endhighlight %}

{:#members:hiddenitemindex}

Specifies to hide a pane of Tab control.

• []

{% highlight html %}

<ej-tab id="tab" [hiddenItemIndex]="hiddenItemIndex">

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

{% endhighlight %}

{% highlight ts %}

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

@Component({ selector: 'ej-app', templateUrl: './default.component.html' }) export class DefaultComponent { hiddenItemIndex: array; constructor() { this.hiddenItemIndex= [0,1]; } }

{% endhighlight %}

{:#members:htmlattributes}

Specifies the HTML Attributes of the Tab.

• {}

{% highlight html %}

<ej-tab id="tab" [htmlAttributes]="htmlAttributes">

• Twitter
• Facebook
• WhatsApp

{% endhighlight %}

{% highlight ts %}

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

@Component({ selector: 'ej-app', templateUrl: './default.component.html' }) export class DefaultComponent { htmlAttributes: Object; constructor() { this.htmlAttributes = {class:"my-class"}; } }

{% endhighlight %}

{:#members:idprefix}

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

• "ej-tab-"

{% highlight html %}

<ej-tab id="tab" [allowKeyboardNavigation]=true>

• Twitter
• Facebook
• WhatsApp

{% endhighlight %}

{% highlight ts %}

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

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

constructor() {
   
}

}

{% endhighlight %}

{:#members:selecteditemindex}

Specifies the Tab header in active for given index value.

• 0

{% highlight html %}

<ej-tab id="tab" [selectedItemIndex]="selectedItemIndex">

• Twitter
• Facebook
• WhatsApp

{% endhighlight %}

{% highlight ts %}

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

@Component({ selector: 'ej-app', templateUrl: './default.component.html' }) export class DefaultComponent { selectedItemIndex: any; constructor() { this.selectedItemIndex = 1; } }

{% endhighlight %}

{:#members:showclosebutton}

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

• false

{% highlight html %}

<ej-tab id="tab" [showCloseButton]=true>

• Twitter
• Facebook
• WhatsApp

{% endhighlight %}

{% highlight ts %}

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

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

constructor() {
   
}

}

{% endhighlight %}

{:#members:showreloadicon}

Display the Reload button for each tab items.

• false

{% highlight html %}

<ej-tab id="tab" [showReloadIcon]=true>

• Twitter
• Facebook
• WhatsApp

{% endhighlight %}

{% highlight ts %}

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

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

constructor() {
   
}

}

{% endhighlight %}

{:#members:showroundedcorner}

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

• false

{% highlight html %}

<ej-tab id="tab" [showRoundedCorner]=true>

• Twitter
• Facebook
• WhatsApp

{% endhighlight %}

{% highlight ts %}

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

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

constructor() {
   
}

}

{% endhighlight %}

{:#members:width}

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

• null

{% highlight html %}

• Twitter
• Facebook
• WhatsApp

{% endhighlight %}

{% highlight ts %}

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

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

constructor() {
   
}

}

{% endhighlight %}

{:#methods:additem}

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

{% highlight html %}

<ej-tab id="tab" [allowKeyboardNavigation]=true>

• Twitter
• Facebook
• WhatsApp

{% endhighlight %}

{% highlight ts %}

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

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

constructor() {
   
}
OnClick(){

var obj = $("#tab").data("ejTab");

obj.addItem("#new", "New Item", 3, "myClass", "newItem");

} }

{% endhighlight %}

{% highlight html %}

<ej-tab id="tab" [allowKeyboardNavigation]=true>

• Twitter
• Facebook
• WhatsApp

{% endhighlight %}

{% highlight ts %}

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

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

constructor() {
   
}
OnClick(){

$("#tab").ejTab("addItem","#new","New Item",3); 

} }

{% endhighlight %}

{:#methods:disable}

To disable the tab control.

{% highlight html %}

<ej-tab id="tab" [allowKeyboardNavigation]=true>

• Twitter
• Facebook
• WhatsApp

{% endhighlight %}

{% highlight ts %}

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

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

constructor() {
   
}
OnClick(){

var obj = $("#tab").data("ejTab");

obj.disable();

} }

{% endhighlight %}

{% highlight html %}

<ej-tab id="tab" [allowKeyboardNavigation]=true>

• Twitter
• Facebook
• WhatsApp

{% endhighlight %}

{% highlight ts %}

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

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

constructor() {
   
}
OnClick(){

$("#tab").ejTab("disable"); 

} }

{% endhighlight %}

{:#methods:enable}

To enable the tab control.

{% highlight html %}

<ej-tab id="tab" [allowKeyboardNavigation]=true [enabled]=false>

• Twitter
• Facebook
• WhatsApp

{% endhighlight %}

{% highlight ts %}

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

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

constructor() {
   
}
OnClick(){

var obj = $("#tab").data("ejTab");

obj.enable();

} }

{% endhighlight %}

{% highlight html %}

<ej-tab id="tab" [allowKeyboardNavigation]=true [enabled]=false>

• Twitter
• Facebook
• WhatsApp

{% endhighlight %}

{% highlight ts %}

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

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

constructor() {
   
}
OnClick(){

$("#tab").ejTab("enable"); 

} }

{% endhighlight %}

{:#methods:getitemscount}

This function get the number of tab rendered

####Returns

number

{% highlight html %}

<ej-tab id="tab" [allowKeyboardNavigation]=true>

• Twitter
• Facebook
• WhatsApp

{% endhighlight %}

{% highlight ts %}

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

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

constructor() {
   
}
OnClick(){

var obj = $("#tab").data("ejTab");

obj.getItemsCount();

} }

{% endhighlight %}

{% highlight html %}

<ej-tab id="tab" [allowKeyboardNavigation]=true>

• Twitter
• Facebook
• WhatsApp

{% endhighlight %}

{% highlight ts %}

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

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

constructor() {
   
}
OnClick(){

$("#tab").ejTab("getItemsCount"); 

} }

{% endhighlight %}

{:#methods:hide}

This function hides the tab control.

{% highlight html %}

<ej-tab id="tab" [allowKeyboardNavigation]=true>

• Twitter
• Facebook
• WhatsApp

{% endhighlight %}

{% highlight ts %}

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

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

constructor() {
   
}
OnClick(){

var obj = $("#tab").data("ejTab");

obj.hide();

} }

{% endhighlight %}

{% highlight html %}

<ej-tab id="tab" [allowKeyboardNavigation]=true>

• Twitter
• Facebook
• WhatsApp

{% endhighlight %}

{% highlight ts %}

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

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

constructor() {
   
}
OnClick(){

$("#tab").ejTab("hide"); 

} }

{% endhighlight %}

{:#methods:hideitem}

This function hides the specified item tab in tab control.

{% highlight html %}

<ej-tab id="tab" [allowKeyboardNavigation]=true>

• Twitter
• Facebook
• WhatsApp

{% endhighlight %}

{% highlight ts %}

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

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

constructor() {
   
}
OnClick(){

var obj = $("#tab").data("ejTab");

obj.hideItem(1);

} }

{% endhighlight %}

{% highlight html %}

<ej-tab id="tab" [allowKeyboardNavigation]=true>

• Twitter
• Facebook
• WhatsApp

{% endhighlight %}

{% highlight ts %}

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

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

constructor() {
   
}
OnClick(){

$("#tab").ejTab("hideItem",1); 

} }

{% endhighlight %}

{:#methods:removeitem}

Remove the given index tab item.

{% highlight html %}

<ej-tab id="tab" [allowKeyboardNavigation]=true>

• Twitter
• Facebook
• WhatsApp

{% endhighlight %}

{% highlight ts %}

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

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

constructor() {
   
}
OnClick(){

var obj = $("#tab").data("ejTab");

obj.removeItem(1);

} }

{% endhighlight %}

{% highlight html %}

<ej-tab id="tab" [allowKeyboardNavigation]=true>

• Twitter
• Facebook
• WhatsApp

{% endhighlight %}

{% highlight ts %}

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

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

constructor() {
   
}
OnClick(){

$("#tab").ejTab("removeItem",1); 

} }

{% endhighlight %}

{:#methods:show}

This function is to show the tab control.

{% highlight html %}

<ej-tab id="tab" [allowKeyboardNavigation]=true>

• Twitter
• Facebook
• WhatsApp

{% endhighlight %}

{% highlight ts %}

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

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

constructor() {
   
}
OnClick(){

var obj = $("#tab").data("ejTab");

obj.show();

} }

{% endhighlight %}

{% highlight html %}

<ej-tab id="tab" [allowKeyboardNavigation]=true>

• Twitter
• Facebook
• WhatsApp

{% endhighlight %}

{% highlight ts %}

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

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

constructor() {
   
}
OnClick(){

$("#tab").ejTab("show"); 

} }

{% endhighlight %}

{:#methods:showitem}

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

{% highlight html %}

<ej-tab id="tab" [allowKeyboardNavigation]=true>

• Twitter
• Facebook
• WhatsApp

{% endhighlight %}

{% highlight ts %}

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

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

constructor() {
   
}
OnClick(){

var obj = $("#tab").data("ejTab");

obj.showItem(1);

} }

{% endhighlight %}

{% highlight html %}

<ej-tab id="tab" [allowKeyboardNavigation]=true>

• Twitter
• Facebook
• WhatsApp

{% endhighlight %}

{% highlight ts %}

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

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

constructor() {
   
}
OnClick(){

$("#tab").ejTab("showItem",1); 

} }

{% endhighlight %}

{:#events:itemactive}

Triggered after a tab item activated.

{% highlight html %}

<ej-tab id="tab" (itemActive)="itemActive($event)">

• Twitter
• Facebook
• WhatsApp

{% endhighlight %}

{% highlight ts %}

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

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

constructor() {
   
}
itemActive(args){

} }

{% endhighlight %}

{:#events:ajaxbeforeload}

Triggered before AJAX content has been loaded.

{% highlight html %}

{% endhighlight %}

{% highlight ts %}

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

@Component({ selector: 'ej-app', templateUrl: './tab.component.html', styleUrls: ['./tab.component.css'], encapsulation: ViewEncapsulation.None, }) export class ScrollTabComponent { dataType: any;

contentType: any;

async: any; cache: any; data: Object; type: any; constructor() { this.cache= false; this.data= {}; this.type= 'GET';

this.dataType= "html";

this.contentType= "html";

this.async= true; } ajaxBeforeLoad(args){

}

}

{% endhighlight %}

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

{% highlight html %}

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

{% endhighlight %}

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

{% highlight html %}

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

{% endhighlight %}

{:#events:ajaxerror}

Triggered if error occurs in AJAX request.

{% highlight html %}

{% endhighlight %}

{% highlight ts %}

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

@Component({ selector: 'ej-app', templateUrl: './tab.component.html', styleUrls: ['./tab.component.css'], encapsulation: ViewEncapsulation.None, }) export class ScrollTabComponent { dataType: any;

contentType: any;

async: any; cache: any; data: Object; type: any; constructor() { this.cache= false; this.data= {}; this.type= 'GET';

this.dataType= "html";

this.contentType= "html";

this.async= true; } ajaxError(args){} }

{% endhighlight %}

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

{% highlight html %}

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

{% endhighlight %}

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

{% highlight html %}

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

{% endhighlight %}

{:#events:ajaxload}

Triggered after AJAX content load action.

{% highlight html %}

{% endhighlight %}

{% highlight ts %}

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

@Component({ selector: 'ej-app', templateUrl: './tab.component.html', styleUrls: ['./tab.component.css'], encapsulation: ViewEncapsulation.None, }) export class ScrollTabComponent { dataType: any;

contentType: any;

async: any; cache: any; data: Object; type: any; constructor() { this.cache= false; this.data= {}; this.type= 'GET';

this.dataType= "html";

this.contentType= "html";

this.async= true; } ajaxLoad(args){

}

}

{% endhighlight %}

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

{% highlight html %}

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

{% endhighlight %}

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

{% highlight html %}

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

{% endhighlight %}

{:#events:ajaxsuccess}

Triggered after a tab item activated.

{% highlight html %}

{% endhighlight %}

{% highlight ts %}

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

@Component({ selector: 'ej-app', templateUrl: './tab.component.html', styleUrls: ['./tab.component.css'], encapsulation: ViewEncapsulation.None, }) export class ScrollTabComponent { dataType: any;

contentType: any;

async: any; cache: any; data: Object; type: any; constructor() { this.cache= false; this.data= {}; this.type= 'GET';

this.dataType= "html";

this.contentType= "html";

this.async= true; } ajaxSuccess(args){} }

{% endhighlight %}

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

{% highlight html %}

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

{% endhighlight %}

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

{% highlight html %}

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

{% endhighlight %}

{:#events:beforeactive}

Triggered before a tab item activated.

{% highlight html %}

<ej-tab id="tab" (beforeActive)="beforeActive($event)">

• Twitter
• Facebook
• WhatsApp

{% endhighlight %}

{% highlight ts %}

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

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

constructor() {
   
}
beforeActive(args){

} }

{% endhighlight %}

{:#events:beforeitemremove}

Triggered before a tab item remove.

{% highlight html %}

<ej-tab id="tab" (beforeItemRemove)="beforeItemRemove($event)">

• Twitter
• Facebook
• WhatsApp

{% endhighlight %}

{% highlight ts %}

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

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

constructor() {
   
}
beforeItemRemove(args){

} }

{% endhighlight %}

{:#events:create}

Triggered before a tab item Create.

{% highlight html %}

<ej-tab id="tab" (create)="create($event)">

• Twitter
• Facebook
• WhatsApp

{% endhighlight %}

{% highlight ts %}

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

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

constructor() {
   
}
create(args){

} }

{% endhighlight %}

{:#events:destroy}

Triggered before a tab item destroy.

{% highlight html %}

<ej-tab id="tab" (destroy)="destroy($event)">

• Twitter
• Facebook
• WhatsApp

{% endhighlight %}

{% highlight ts %}

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

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

constructor() {
   
}
destroy(args){

} }

{% endhighlight %}

{:#events:itemadd}

Triggered after new tab item add

{% highlight html %}

<ej-tab id="tab" (itemAdd)="itemAdd($event)">

• Twitter
• Facebook
• WhatsApp

{% endhighlight %}

{% highlight ts %}

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

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

constructor() {
   
}
itemAdd(args){

} }

{% endhighlight %}

{:#events:itemremove}

Triggered after tab item removed.

{% highlight html %}

<ej-tab id="tab" (itemActive)="itemRemove($event)">

• Twitter
• Facebook
• WhatsApp

{% endhighlight %}

{% highlight ts %}

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

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

constructor() {
   
}
itemRemove(args){

} }

{% endhighlight %}