Tab Panel with Output

import { CommonModule } from '@angular/common';
import { ChangeDetectionStrategy, Component, inject, Input, OnInit } from '@angular/core';
import { Tab } from '@app/lib/shared/models/tab.model';
import { MenuService } from '@app/lib/shared/services/menu.service';

import { TabType } from './tab.enum';

@Component({
  selector: 'app-tab',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './tab.component.html',
  styleUrl: './tab.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class TabComponent implements OnInit {
  private readonly _menuService = inject(MenuService);
  @Input() public isDark: boolean = false;
  @Input() public isActive: boolean = false;
  @Input() public tabType: TabType = TabType.DEFAULT;
  public TabType = TabType;
  public mockData?: readonly Tab[];
  public activeIndex: number | null = null;

  public ngOnInit(): void {
    this.mockData = this._menuService.getMockTab();
    this.activeIndex = 0;
  }

  public setActiveIndex(index: number): void {
    this.activeIndex = index;
  }

  public get classes(): string[] {
    const typeClass = `tab-${this.tabType}`;
    const darkMode = this.isDark ? 'dark' : 'light';
    return [typeClass, darkMode];
  }

  public get activeContent(): string | undefined {
    return this.activeIndex !== null && this.mockData ? this.mockData[this.activeIndex].content : undefined;
  }
}

<div class="tab-wrapper" [ngClass]="classes">
  <ul class="tab">
    <li
      class="tab-item"
      *ngFor="let item of mockData; let i = index"
      [ngClass]="{ active: activeIndex === i }"
      (click)="setActiveIndex(i)"
    >
      <button class="tab-item-link" [ngClass]="{ active: activeIndex === i }" href="">{{ item.title }}</button>
    </li>
  </ul>
  <div class="tab-output">
    {{ activeContent }}
  </div>
</div>