Creating Custom Tabs in Angular using TypeScript

Tabs are a common user interface pattern that allow users to navigate between different sections or views within an application. In this tutorial, we will walk through the steps for creating custom tabs in Angular.

Here’s an example of how you could create tabs using TypeScript in Angular:

Step 1: Set Up Your Project

To get started, make sure you have the latest version of Angular CLI installed. You can create a new Angular project with the following command:

ng new my-app

Next, navigate to your project directory with the following command:

cd my-app

Step 2: Create the Tab Component

In Angular, it’s common to create reusable components for UI elements like tabs. To create a new component for our tabs, run the following command:

ng generate component custom-tab

This will create a new folder called custom-tab in your src/app directory, containing the necessary files for your new component.

Step 3: Set Up the Template

In the custom-tab.component.html file, we will define the template for our custom tabs. Here’s an example of what our template could look like:

<ul class="nav-tabset">
    <li class="nav-tab" [ngClass]="{'active': currentTab === 'tab1'}">
        <span (click)="switchTab($event, 'tab1')">Tab 1</span>
    </li>
    <li class="nav-tab" [ngClass]="{'active': currentTab === 'tab2'}">
        <span (click)="switchTab($event, 'tab2')">Tab 2</span>
    </li>
    <li class="nav-tab" [ngClass]="{'active': currentTab === 'tab3'}">
        <span (click)="switchTab($event, 'tab3')">Tab 3</span>
    </li>
    <li class="nav-tab" [ngClass]="{'active': currentTab === 'tab4'}">
        <span (click)="switchTab($event, 'tab4')">Tab 4</span>
    </li>
</ul>
<div class="tabs-container">
    <div class="pane" id="tab1" *ngIf="currentTab === 'tab1'">
        <p>Content for Tab 1</p>
    </div>
    <div class="pane" id="tab2" *ngIf="currentTab === 'tab2'">
        <p>Content for Tab 2</p>
    </div>
    <div class="pane" id="tab3" *ngIf="currentTab === 'tab3'">
        <p>Content for Tab 3</p>
    </div>
    <div class="pane" id="tab4" *ngIf="currentTab === 'tab4'">
        <p>Content for Tab 4</p>
    </div>
</div>

Step 4: Define the Component Logic

In the custom-tab.component.ts file, we will define the logic for our custom tabs. Here’s an example of what our component could look like:

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

@Component({
    selector: 'app-custom-tab',
    templateUrl: './custom-tab.component.html',
    styleUrls: ['./custom-tab.component.scss']
})
export class CustomTabComponent implements OnInit {

    constructor() { }

    ngOnInit(): void {}

    // for tab click event
    currentTab = 'tab1';
    switchTab(event: MouseEvent, tab: string) {
        event.preventDefault();
        this.currentTab = tab;
    }

}

This blog post walks through the steps for creating custom tabs in an Angular application. The component logic is defined to activate and deactivate tabs based on user interaction. With these steps, you can create custom tabs that better suit the needs of your Angular application.

That’s it!

If you have any queries then please let me know in the comments section. If you think this post saved your time, please subscribe to our newsletter for regular updates.

Thank you in advance!