How to Create a Tab Component in Angular: Simple Guide

To create a tab component in Angular, define a component with a list of tab labels and content sections, then use a variable to track the active tab index. Use Angular's (click) event to change the active tab and *ngIf or [hidden] to show the selected tab content.

Syntax

A tab component in Angular typically includes:

• Tabs list: Buttons or clickable elements to select tabs.
• Active tab state: A variable to track which tab is selected.
• Content display: Conditional rendering to show content for the active tab.

Use Angular event binding (click) to update the active tab and structural directives like *ngIf or property binding like [hidden] to control visibility.

typescript

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

@Component({
  selector: 'app-tabs',
  template: `
    <div class="tabs">
      <button *ngFor="let tab of tabs; let i = index"
              (click)="selectTab(i)"
              [class.active]="activeTab === i">
        {{ tab.label }}
      </button>
    </div>
    <div class="tab-content">
      <ng-container *ngFor="let tab of tabs; let i = index">
        <div *ngIf="activeTab === i">
          {{ tab.content }}
        </div>
      </ng-container>
    </div>
  `,
  styles: [
    `.active { font-weight: bold; }`
  ]
})
export class TabsComponent {
  tabs = [
    { label: 'Tab 1', content: 'Content 1' },
    { label: 'Tab 2', content: 'Content 2' },
    { label: 'Tab 3', content: 'Content 3' }
  ];
  activeTab = 0;

  selectTab(index: number) {
    this.activeTab = index;
  }
}

Example

This example shows a simple Angular tab component with three tabs. Clicking a tab button changes the displayed content below. The active tab button is styled bold.

typescript

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

@Component({
  selector: 'app-tabs',
  template: `
    <nav class="tabs" role="tablist">
      <button *ngFor="let tab of tabs; let i = index"
              (click)="selectTab(i)"
              [class.active]="activeTab === i"
              [attr.aria-selected]="activeTab === i"
              role="tab"
              tabindex="0">
        {{ tab.label }}
      </button>
    </nav>
    <section class="tab-content" role="tabpanel">
      <div *ngFor="let tab of tabs; let i = index" [hidden]="activeTab !== i">
        {{ tab.content }}
      </div>
    </section>
  `,
  styles: [
    `.tabs { display: flex; gap: 1rem; margin-bottom: 1rem; }
     button { background: none; border: none; cursor: pointer; font-size: 1rem; }
     .active { font-weight: bold; border-bottom: 2px solid black; }
     .tab-content { font-size: 1.1rem; }
    `
  ]
})
export class TabsComponent {
  tabs = [
    { label: 'Home', content: 'Welcome to the Home tab!' },
    { label: 'Profile', content: 'Here is your Profile info.' },
    { label: 'Settings', content: 'Adjust your Settings here.' }
  ];
  activeTab = 0;

  selectTab(index: number) {
    this.activeTab = index;
  }
}

Output

Tabs displayed as three buttons labeled Home, Profile, Settings. Clicking each button shows its content below. The active tab button is bold with a bottom border.

Common Pitfalls

Common mistakes when creating tabs in Angular include:

• Not updating the active tab state on click, so tabs don't switch.
• Using *ngIf incorrectly causing content to be destroyed and recreated unnecessarily.
• Missing accessibility roles and attributes like role="tab" and aria-selected.
• Styling issues where active tab is not visually distinct.

Always manage tab state clearly and use semantic HTML for accessibility.

html

/* Wrong: Not updating active tab */
<button (click)="{}">Tab 1</button>

/* Right: Update active tab on click */
<button (click)="selectTab(0)">Tab 1</button>

Quick Reference

Tips for Angular tab components:

• Use a numeric variable to track active tab index.
• Use (click) event to change active tab.
• Use *ngIf or [hidden] to show/hide tab content.
• Style active tab distinctly for clarity.
• Add accessibility roles: role="tablist", role="tab", role="tabpanel".

Key Takeaways

Use a variable to track which tab is active and update it on tab button clicks.

Show tab content conditionally with Angular directives like *ngIf or [hidden].

Style the active tab button clearly to improve user experience.

Add accessibility roles and attributes for better screen reader support.

Avoid destroying tab content unnecessarily by using [hidden] instead of *ngIf when possible.