bs-tab-control hosts a stack of bs-tab-page children. Each page declares its tab label via the *bsTabPageHeader structural directive; the remaining content of the page is rendered when the tab is active. Use [tabsPosition] to put the strip at the top or bottom, and [border] to draw the standard tab outline.
<bs-tab-control [border]="true">
<bs-tab-page>
<ng-container *bsTabPageHeader>Tab 1</ng-container>
<div class="p-3">Content of the first tab.</div>
</bs-tab-page>
<bs-tab-page>
<ng-container *bsTabPageHeader>Tab 2</ng-container>
<div class="p-3">Content of the second tab.</div>
</bs-tab-page>
</bs-tab-control>
import { Component } from '@angular/core';
import {
BsTabControlComponent,
BsTabPageComponent,
BsTabPageHeaderDirective,
} from '@mintplayer/ng-bootstrap/tab-control';
@Component({
selector: 'my-tab-control-demo',
templateUrl: './my-tab-control-demo.component.html',
imports: [
BsTabControlComponent,
BsTabPageComponent,
BsTabPageHeaderDirective,
],
})
export class MyTabControlDemoComponent {}