Getting started with Angular Tab component

19 Oct 202424 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.

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

npm install -g @angular/cli

Create an Angular Application

Start a new Angular application using below Angular CLI command.

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.

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.

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.

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

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.

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

import { TabModule } from '@syncfusion/ej2-angular-navigations'
import { Component, OnInit } from '@angular/core';

/**
 * Tab Component
 */

@Component({
imports: [
  TabModule
],
standalone: true,
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.

import { TabModule } from '@syncfusion/ej2-angular-navigations'
import { Component } from '@angular/core';

/**
 * Tab Component
 */

@Component({
imports: [
  TabModule
],
standalone: true,
selector: 'app-root',
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 US$19.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.

npm start

The following example illustrates the output in your browser.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms'
import { TabModule } from '@syncfusion/ej2-angular-navigations'




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

/**
 * Tab Component
 */

@Component({
imports: [
         FormsModule, TabModule
    ],


standalone: true,
    selector: 'app-root',
    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 US$19.3 billion.';
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

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,

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

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms'
import { TabModule } from '@syncfusion/ej2-angular-navigations'




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

/**
 * Adaptive Tab Component
 */

@Component({
imports: [
         FormsModule, TabModule
    ],


standalone: true,
    selector: 'app-root',
    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 US$19.3 billion.
                        </ng-template>
                    </e-tabitem>
                </e-tabitems>
            </ejs-tab>`
})
export class AppComponent {
  
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

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,

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

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms'
import { TabModule } from '@syncfusion/ej2-angular-navigations'




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

@Component({
imports: [
        FormsModule,TabModule
    ],


standalone: true,
    selector: 'app-root',
        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 US$19.3 billion.
                </div>
            </div>
        </ejs-tab>`
})
export class AppComponent {
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

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

• How to load tab with DataSource