Search results

Getting started with Angular Tabs component

05 Oct 2022 / 12 minutes to read

This section briefly explains about how to create a simple Tab using Angular by configuring the Tab header content.

Dependencies

The following is the list of dependencies required to use the Angular Tab component in your application.

Copied to clipboard
|-- @syncfusion/ej2-angular-navigations
    |-- @syncfusion/ej2-base
    |-- @syncfusion/ej2-angular-base
    |-- @syncfusion/ej2-navigations
        |-- @syncfusion/ej2-buttons
        |-- @syncfusion/ej2-popups

Setup Angular Environment

You can use Angular CLI to setup your Angular applications. To install Angular CLI use the following command.

Copied to clipboard
npm install -g @angular/cli

Create an Angular Application

Start a new Angular application using below Angular CLI command.

Copied to clipboard
ng new my-app
cd my-app

Installing Syncfusion Tab Package

Syncfusion packages are distributed in npm as @syncfusion scoped packages. You can get all the Angular Syncfusion package from npm link.

Currently, Syncfusion provides two types of package structures for Angular components,

  1. Ivy library distribution package format
  2. Angular compatibility compiler(Angular’s legacy compilation and rendering pipeline) package.

Ivy library distribution package

Syncfusion Angular packages(>=20.2.36) has been moved to the Ivy distribution to support the Angular Ivy rendering engine and the package are compatible with Angular version 12 and above. To download the package use the below command.

Add @syncfusion/ej2-angular-navigations package to the application.

Copied to clipboard
npm install @syncfusion/ej2-angular-navigations --save

Angular compatibility compiled package(ngcc)

For Angular version below 12, you can use the legacy (ngcc) package of the Syncfusion Angular components. To download the ngcc package use the below.

Add @syncfusion/ej2-angular-navigations@ngcc package to the application.

Copied to clipboard
npm install @syncfusion/ej2-angular-navigations@ngcc --save

To mention the ngcc package in the package.json file, add the suffix -ngcc with the package version as below.

Copied to clipboard
@syncfusion/ej2-angular-navigations:"20.2.38-ngcc"

Note: If the ngcc tag is not specified while installing the package, the Ivy Library Package will be installed and this package will throw a warning.

Registering Tab Module

Import Tab module into Angular application(app.module.ts) from the package @syncfusion/ej2-angular-navigations [src/app/app.module.ts].

Copied to clipboard
import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// import the TabModule for the Tab component
import { TabModule } from '@syncfusion/ej2-angular-navigations';
import { AppComponent }  from './app.component';

@NgModule({
  //declaration of ej2-angular-navigations module into NgModule
  imports:      [ BrowserModule, TabModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Adding CSS reference

The following CSS files are available in ../node_modules/@syncfusionpackage folder. This can be referenced in [src/styles.css] using following code.

Copied to clipboard
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';  
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';  
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';  
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';

Add Tab component

Modify the template in [src/app/app.component.ts] file to render the Angular Tab component. Add the Angular Tab by using <ejs-tab> selector in template section of the app.component.ts file.

Copied to clipboard
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  // specifies the template string for the Tab component
  template: `<ejs-tab> </ejs-tab>`
})
export class AppComponent implements OnInit {

ngOnInit(): void {
}
}

Initialize the Tab using JSON items collection

The Tab can be rendered by defining a JSON array. The item is rendered with header text and content for each Tab.

Copied to clipboard
import { Component } from '@angular/core';
import { TabComponent } from '@syncfusion/ej2-angular-navigations';

/**
 * Adaptive Tab Component
 */

@Component({
selector: 'app-container',
template: `<ejs-tab id="element">
        <e-tabitems>
            <e-tabitem [header]='headerText[0]' [content]="content0"></e-tabitem>
            <e-tabitem [header]='headerText[1]' [content]="content1"></e-tabitem>
            <e-tabitem [header]='headerText[2]' [content]="content2"></e-tabitem>
        </e-tabitems>
    </ejs-tab>`

})
export class AppComponent {

   public headerText: Object = [{ 'text': 'Twitter' }, { 'text': 'Facebook' },{ 'text': 'WhatsApp' }];

   public content0: string = '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.';

public content1: string = '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.';

public content2: string = 'WhatsApp Messenger is a proprietary cross-platform instant messaging client for smartphones 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 US1. 9.3 billion.';


}

Run the application

After completing the configuration required to render a basic Tab, run the following command to display the output in your default browser.

Copied to clipboard
npm start

The following example illustrates the output in your browser.

Source
Preview
app.component.ts
app.module.ts
main.ts
index.html
Copied to clipboard
import { Component } from '@angular/core';
import { TabComponent } from '@syncfusion/ej2-angular-navigations';

/**
 * Tab Component
 */

@Component({
selector: 'app-container',
template: `<ejs-tab id="element">
        <e-tabitems>
            <e-tabitem [header]='headerText[0]' [content]="content0"></e-tabitem>
            <e-tabitem [header]='headerText[1]' [content]="content1"></e-tabitem>
            <e-tabitem [header]='headerText[2]' [content]="content2"></e-tabitem>
        </e-tabitems>
    </ejs-tab>`
})
export class AppComponent {
public headerText: Object = [{ 'text': 'Twitter' }, { 'text': 'Facebook' },{ 'text': 'WhatsApp' }];

public content0: string = '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.';

public content1: string = '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.';

public content2: string = 'WhatsApp Messenger is a proprietary cross-platform instant messaging client for smartphones 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 US1. 9.3 billion.';
}
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { TabModule } from '@syncfusion/ej2-angular-navigations';
/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule, FormsModule, TabModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Angular Tab</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Angular Tab Control" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/20.3.47/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://unpkg.com/core-js/client/shim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.6.25/zone.min.js"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id="wrapper" style='margin-top: 20px;'>
        <app-container>
            <div id='loader'>LOADING....</div>
        </app-container>
    </div>
</body>
</html>

In the above sample code, #element is the id of the HTML element in a page to which the Tab is initialized.

Initialize the Tab using template

The Tab component can also be rendered using the Angular template ng-template. The Tab consists this template support for both its header and content of the item property. You need to follow the below structure of ng-template to render the Tab,

Copied to clipboard
  <ejs-tab id="element">
<e-tabitems>
    <e-tabitem>
        <ng-template #headerText>   --> Tab header
            <div>   --> Header Item
            </div>
        </ng-template>
        <ng-template #content>      --> Tab content
                    --> Content Item
        </ng-template>
    </e-tabitem>
</e-tabitems>
  </ejs-tab>
Source
Preview
app.component.ts
app.module.ts
main.ts
index.html
Copied to clipboard
import { Component } from '@angular/core';
import { TabComponent } from '@syncfusion/ej2-angular-navigations';

/**
 * Adaptive Tab Component
 */

@Component({
selector: 'app-container',
template: `<ejs-tab id="element">
        <e-tabitems>
                <e-tabitem>
                    <ng-template #headerText>
                       <div> Twitter </div>
                    </ng-template>
                    <ng-template #content>
                        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.
                    </ng-template>
                </e-tabitem>
                <e-tabitem>
                    <ng-template #headerText>
                       <div> Facebook </div>
                    </ng-template>
                    <ng-template #content>
                        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.
                    </ng-template>
                </e-tabitem>
                <e-tabitem>
                    <ng-template #headerText>
                       <div> WhatsApp </div>
                    </ng-template>
                    <ng-template #content>
                        WhatsApp Messenger is a proprietary cross-platform instant messaging client for smartphones 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 US1. 9.3 billion.
                    </ng-template>
                </e-tabitem>
            </e-tabitems>
        </ejs-tab>`
})
export class AppComponent {
  
}
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { TabModule } from '@syncfusion/ej2-angular-navigations';
/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule, FormsModule, TabModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Angular Tab</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Angular Tab Control" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/20.3.47/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://unpkg.com/core-js/client/shim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.6.25/zone.min.js"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id="wrapper" style='margin-top: 20px;'>
        <app-container>
            <div id='loader'>LOADING....</div>
        </app-container>
    </div>
</body>
</html>

Initialize the Tab using HTML elements

The Angular Tab component can be rendered based on the given HTML element using <ejs-tab> tag. Header section must be enclosed with in a wrapper element using e-tab-header class and corresponding content must be mapped with e-content class. You need to follow the below structure of HTML elements to render the Tab,

Copied to clipboard
  <ejs-tab id="element">   --> Root Tab element
<div class="e-tab-header">      --> Tab header
   <div>   --> Header Item
   </div>
</div>
<div class="e-content">      --> Tab content
   <div>   --> Content Item
   </div>
</div>
  </ejs-tab>
Source
Preview
app.component.ts
app.module.ts
main.ts
index.html
Copied to clipboard
import { Component } from '@angular/core';
import { TabComponent } from '@syncfusion/ej2-angular-navigations';

@Component({
selector: 'app-container',
    template: `<ejs-tab id="element">
        <div class="e-tab-header">
            <div>Twitter </div>
            <div>Facebook </div>
            <div>WhatsApp </div>
        </div>
        <div class="e-content">
            <div>
                    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>
                    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>
                    WhatsApp Messenger is a proprietary cross-platform instant messaging client for smartphones 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 US1. 9.3 billion.
            </div>
        </div>
    </ejs-tab>`
})
export class AppComponent {
}
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { TabModule } from '@syncfusion/ej2-angular-navigations';
/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,FormsModule,TabModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Angular Tab</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Angular Tab Control" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/20.3.47/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://unpkg.com/core-js/client/shim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.6.25/zone.min.js"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id="wrapper" style='margin-top: 20px;'>
        <app-container>
            <div id='loader'>LOADING....</div>
        </app-container>
    </div>
</body>
</html>

You can refer to our Angular Tab feature tour page for its groundbreaking feature representations. You can also explore our Angular Tab example that shows you how to render the Tabs in Angular.

See Also