Getting started with Angular Tab component

28 Jul 20267 minutes to read

The Tab component organizes related content into multiple sections displayed within a single view, allowing users to switch between tabs to access different content, features, or settings without leaving the current context.

This guide provides step-by-step instructions for setting up an Angular project with TypeScript using Angular CLI, and integrating Syncfusion® Angular Tab component. The recommended setup below targets modern Angular (CLI ng add). For module-based or framework host setups, see See Also.

The Angular CLI simplifies creating, managing, and building Angular applications so you can start development quickly.

Prerequisites

  • Install a supported Node.js LTS release and npm (or another Node package manager) before continuing.
  • Ensure your environment meets the System Requirements for Syncfusion® Angular UI Components.
  • Supported Angular and Syncfusion package combinations are listed in the Version Compatibility guide. This walkthrough assumes Angular 17+ with the default application scaffolding (src/app/app.ts or the equivalent root component generated by your CLI version).

Setup the Angular application

A straightforward approach to beginning with Angular is to create a new application using the Angular CLI. Install Angular CLI globally with the following command:

npm install -g @angular/cli

Angular 21 Standalone Architecture: Standalone components are the default in Angular 21. This guide uses the modern standalone architecture. If you need more information about the standalone architecture, refer to the Standalone Guide.

Create a new application

With Angular CLI installed, execute this command to generate a new application:

ng new syncfusion-angular-app
  • This command will prompt you to configure settings like enabling Angular routing and choosing a stylesheet format.
? Which stylesheet format would you like to use? (Use arrow keys)
> CSS             [ https://developer.mozilla.org/docs/Web/CSS                     ]
  Sass (SCSS)     [ https://sass-lang.com/documentation/syntax#scss                ]
  Sass (Indented) [ https://sass-lang.com/documentation/syntax#the-indented-syntax ]
  Less            [ http://lesscss.org                                             ]
  • By default, a CSS-based application is created. Use SCSS if required:
ng new syncfusion-angular-app --style=scss
  • During project setup, when prompted for the Server-side rendering (SSR) option, choose the appropriate configuration.

Initial_setup

  • Select the required AI tool or ‘none’ if you do not need any AI tool.

Initial_setup

  • Navigate to your newly created application directory:
cd syncfusion-angular-app

Note: In Angular 19 and below, it uses app.component.ts, app.component.html, app.component.css etc. In Angular 20+, the CLI generates a simpler structure with src/app/app.ts, app.html, and app.css (no .component. suffixes).

Adding the Syncfusion® Angular Navigations package

To install the Syncfusion® Angular Tab package, use the following command:

ng add @syncfusion/ej2-angular-navigations

The ng add command installs the package, registers it in package.json, and configures the required entries in your workspace automatically.

If ng add is unavailable in your setup, install the package manually with:

npm install @syncfusion/ej2-angular-navigations

Adding CSS reference

Themes for the Syncfusion® Tab component can be applied using CSS files provided through npm theme packages. For available themes, refer to the Themes documentation.

Install the Material 3 theme package using the following npm command:

npm install @syncfusion/ej2-material3-theme

Then add the following CSS reference to the src/styles.css file. This is the default global stylesheet registered under styles in angular.json:

@import "../node_modules/@syncfusion/ej2-material3-theme/styles/tab/index.css";

Add Syncfusion® Tab component

After package and theme setup, update the root component. File name and class name can vary by Angular CLI version (src/app/app.ts with export class App, or app.component.ts with AppComponent). Replace the root component content with the sample below, or merge the Tab import, template, and data into your generated file.

For the full property list, see the Tab API reference.

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

@Component({
  selector: 'app-root',
  imports: [TabModule],
  templateUrl: './app.html',
  styleUrl: './app.css'
})

export class App {

    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.';
}

Place the following markup in the component template file referenced by templateUrl (for example, src/app/app.html):

<div id="tab-container">
  <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>
</div>

Running the application

From the project root:

ng serve

When the build succeeds, the CLI reports a local URL (default: http://localhost:4200). Open that URL in a browser to view the Tab. If the port is already in use, the CLI prompts for another port, or you can run ng serve --port 4201.

Stop the server with Ctrl+C in the terminal.

The following example illustrates the output in your browser.

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

See Also