Tabs

Name: ng-oat
Author: SashiKumar Yadav

Component wrapper for Oat tabs. Pass tab labels as an array and project content panels as children.

Input / API	Type	Description
`[tabs]`	`(string \| NgOatTabItem)[]`	Tab labels (required)
`activeIndex()`	`Signal<number>`	Currently active tab index
`tabChange`	`OutputEmitter`	Fires on tab switch with index & tab
`selectTab(i)`	method	Programmatically select a tab

Import & Usage

typescript

import { Component } from '@angular/core';
import { NgOatTabsComponent } from '@letsprogram/ng-oat';

@Component({
  selector: 'app-example',
  imports: [NgOatTabsComponent],
  template: `
    <ng-oat-tabs
      [tabs]="['Overview', 'Features', 'Pricing']"
      (tabChange)="onTab($event)">
      <div role="tabpanel"><p>Overview content</p></div>
      <div role="tabpanel"><p>Features content</p></div>
      <div role="tabpanel"><p>Pricing content</p></div>
    </ng-oat-tabs>
  `,
})
export class ExampleComponent {
  onTab(e: { index: number }) {
    console.log('Tab:', e.index);
  }
}

String Labels

This is the Overview panel.

This is the Features panel.

This is the Pricing panel.

html

<ng-oat-tabs [tabs]="['Overview', 'Features', 'Pricing']"
             (tabChange)="onTabChange($event)">
  <div role="tabpanel"><p>Overview panel.</p></div>
  <div role="tabpanel"><p>Features panel.</p></div>
  <div role="tabpanel"><p>Pricing panel.</p></div>
</ng-oat-tabs>

Object Labels & Disabled

Dashboard content here.

Analytics content here.

Settings content here.

html

<ng-oat-tabs [tabs]="[
  { label: 'Dashboard' },
  { label: 'Analytics', disabled: true },
  { label: 'Settings' },
]">
  <div role="tabpanel">Dashboard content</div>
  <div role="tabpanel">Analytics content</div>
  <div role="tabpanel">Settings content</div>
</ng-oat-tabs>

Programmatic Selection

First panel

Second panel

Third panel

html

<ng-oat-tabs #t [tabs]="['First', 'Second', 'Third']">
  <div role="tabpanel"><p>First panel</p></div>
  <div role="tabpanel"><p>Second panel</p></div>
  <div role="tabpanel"><p>Third panel</p></div>
</ng-oat-tabs>

<button (click)="t.selectTab(0)">Go to First</button>
<button (click)="t.selectTab(2)">Go to Third</button>