How to get started easily with Syncfusion Angular 11 Tab?

A quick start project that helps you to create an Angular 11 Tab with minimal code configuration.

Project pre-requisites

Make sure that you have the compatible versions of TypeScript and Angular in your machine before starting to work on this project.

• Node.js (latest version)
• Angular 11
• Angular CLI
• Typescript 4+
• Visual Studio code for editor

Angular 11 Tab – Introduction

The Angular 11 Tab used in this project is created from the Syncfusion `ej2-angular-tab` package. You can simply define it as <ejs-tab> within the template.

Dependencies

Before starting with this project, the Angular 11 Tab requires to add the Syncfusion `ej2-angular-navigations` package from npmjs, which are distributed in npm as @syncfusion scoped packages.

Creating Angular Project

We will see the Angular project creation steps using the Angular CLI tool.

1. Install the Angular CLI application in your machine.

npm install -g @angular/cli@11.2.3

2. Now create a new Angular project by using the command `ng new` and navigate to that folder.

   ng new angular11-app
   
   cd angular11-app
   
   

3. Install the ej2-angular-navigations package through the npm install command.

npm install @syncfusion/ej2-angular-navigations --save

Adding Angular 11 Tab

You can add the Angular 11 Tab component by using `ejs-tab` directive and the attributes used within this tag allows you to define other tab functionalities.

1. Import the TabModule into app.module.ts file from the ej2-angular-navigations package.
2. The next step in Angular Tab creation is to import and inject the other required modules within the providers section of app.module.ts.

[app.module.ts]

import { BrowserModule } from '@angular/platform-browser';

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

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

 

import { AppComponent } from './app.component';

 

@NgModule({

    imports: [

        BrowserModule, TabModule

    ],

    providers: [],

    bootstrap: [AppComponent]

})

export class AppModule { }

3. Define the Angular Tab code within the app.component.html file which is mapped against the templateUrl option in app.component.ts file.

[app.component.html]

<ejs-tab id="element">

  <e-tabitems>

    <e-tabitem [header]='headerText[0]'>

      <ng-template #content>

        Twitter is an online social networking service that enables users to send and read short 140-character messages called "tweets".

      </ng-template>

    </e-tabitem>

    <e-tabitem [header]='headerText[1]'>

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

      </ng-template>

    </e-tabitem>

    <e-tabitem [header]='headerText[2]'>

      <ng-template #content>

        WhatsApp Messenger is a proprietary cross-platform instant messaging client for smartphones that operates under

        a subscription business model.

      </ng-template>

    </e-tabitem>

  </e-tabitems>

</ejs-tab>

4. Refer the CDN link of CSS reference within the index.html file.

[index.html]

<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" />

5. Try running the application with the command ng serve, and see the Tab with it’s item displayed on the browser.

There are more options to explore with Angular 11 Tab.