Tabs

Tab Panel

ng generate component tab-panel

tab-panel.component.html

<div class="tab-panel">
  <ul class="tab-list">
    <li *ngFor="let tab of tabs" [class.active]="tab.isActive" (click)="setActiveTab(tab)">
      {{ tab.tabTitle }}
    </li>
  </ul>
  <div class="tab-content">
    <ng-content></ng-content>
  </div>
</div>

tab-panel.component.ts

import { Component, ContentChildren, QueryList, AfterContentInit } from '@angular/core';
import { TabComponent } from './tab.component';

@Component({
  selector: 'app-tab-panel',
  templateUrl: './tab-panel.component.html',
  styleUrls: ['./tab-panel.component.css']
})
export class TabPanelComponent implements AfterContentInit {
  @ContentChildren(TabComponent) tabs: QueryList<TabComponent>;

  ngAfterContentInit(): void {
    this.tabs.first.isActive = true; // Set the first tab as active by default
  }

  setActiveTab(selectedTab: TabComponent): void {
    this.tabs.forEach(tab => tab.isActive = (tab === selectedTab));
  }
}

Tab

ng generate component tab

tab.component.html

<div class="tab-content" [hidden]="!isActive">
  <ng-content></ng-content>
</div>

tab.component.ts

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

@Component({
  selector: 'app-tab',
  templateUrl: './tab.component.html',
  styleUrls: ['./tab.component.css']
})
export class TabComponent {
  @Input() tabTitle: string;
  isActive = false;
}

app.component.html

<app-tab-panel>
  <app-tab tabTitle="Day 1">
    <h2>Day 1 Content</h2>
    <!-- Place your Day 1 content here -->
  </app-tab>
  <app-tab tabTitle="Day 2">
    <h2>Day 2 Content</h2>
    <!-- Place your Day 2 content here -->
  </app-tab>
  <app-tab tabTitle="Day 3">
    <h2>Day 3 Content</h2>
    <!-- Place your Day 3 content here -->
  </app-tab>
</app-tab-panel>

app.component.css

.tab-panel {
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-bottom: 20px;
}

.tab-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
}

.tab-list li {
  padding: 10px 20px;
  cursor: pointer;
  background-color: #f1f1f1;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.tab-list li.active {
  background-color: #ccc;
}

.tab-content {
  padding: 20px;
  border-top: 1px solid #ccc;
}