Angular TabView

Angular TabView is a container component to group content with tabs.

Setup

Refer to PrimeNG setup documentation for download and installation steps for your environment.

Import

import {TabViewModule} from 'primeng/tabview';

Getting Started

Tabview element consists of one or more p-tabPanel elements. Header of the tab is defined using header attribute.

<p-tabView>
    <p-tabPanel header="Header 1">
       Content 1
    </p-tabPanel>
    <p-tabPanel header="Header 2">
        Content 2
    </p-tabPanel>
    <p-tabPanel header="Header 3">
        Content 3
    </p-tabPanel>
</p-tabView>

Dynamic Tabs

p-tabPanel components can be generated dynamically using ngFor, note that in this case due to an Angular issue selected property must be enabled manually.

<p-tabView>
    <p-tabPanel [header]="item.header" *ngFor="let item of items; let i = index" [selected]="i == 0">
        {{item.content}}
    </p-tabPanel>
</p-tabView>

Selection

First tab is selected by default, to customize this enable selected property on another panel.

<p-tabView>
    <p-tabPanel header="Header 1">
       Content 1
    </p-tabPanel>
    <p-tabPanel header="Header 2" [selected]="true">
        Content 2
    </p-tabPanel>
    <p-tabPanel header="Header 3">
        Content 3
    </p-tabPanel>
</p-tabView>

Closable

When closable attribute is enabled, an icon is displayed to close the tab. onClose event is fired when a tab is closed.

<p-tabPanel header="Header Text" [closable]="true">
    Content 1
</p-tabPanel>

If you'd like to control whether a tab can be closed, enable controlClose property which gives you the control to decide at onClose event. In this case, the event gets a 3rd parameter called close callback and invoking this function actually closes the tab.

<p-tabView [controlClose]="true" (onClose)="handleClose($event)">
    <p-tabPanel header="Header Text" [closable]="true">
        Content 1
    </p-tabPanel>
</p-tabView>

handleClose(e) {
   if (condition)
       e.close();
}

Disabled

A tab can be disabled to prevent the content to be displayed by setting the disabled property on a panel.

<p-tabPanel header="Header Text" [disabled]="true">
    Content 1
</p-tabPanel>

Icons

Icons can be placed at left and right of a header using leftIcon and rightIcon properties of tabPanel.

<p-tabPanel header="Header Text" leftIcon="pi-bell-" rightIcon="pi-bookmark">;
    Content
</p-tabPanel>

Header Template

Header of a tab supports templating to place custom html content instead of strings as well.

<p-tabPanel>
    <ng-template pTemplate="header">Custom Content</ng-template>
</p-tabPanel>

Programmatic Control

Tabs can be controlled programmatically using activeIndex property that defines the index of the active tab.

<p-button icon="pi pi-chevron-up" (click)="openPrev()"></p-button>
<p-button icon="pi pi-chevron-down" (click)="openNext()"></p-button>

<p-tabView [(activeIndex)]="index">
    <p-tabPanel header="Header 1">
        Content 1
    </p-tabPanel>
    <p-tabPanel header="Header 2">
        Content 2
    </p-tabPanel>
    <p-tabPanel header="Header 3">
        Content 3
    </p-tabPanel>
</p-tabView>

export class TabViewDemo {

    index: number = 0;

    openNext() {
        this.index = (this.index === 2) ? 0 : this.index + 1;
    }

    openPrev() {
        this.index = (this.index === 0) ? 2 : this.index - 1;
    }

}

Lazy Loading

Lazy loading helps initial load performance by only initializing the active tab, inactive tabs are not initialized until they get selected. A lazy loaded tabpanel contents are cached by default so that upon reselection, they are not created again. You may use cache property on TabPanel to configure this behavior. A TabPanel is specified as lazy when there is a ngTemplate with pTemplate="content" in it.

<p-tabView>
    <p-tabPanel header="Header 1">
        Content 1
    </p-tabPanel>
    <p-tabPanel header="Header 2">
        <ng-template pTemplate="content">
            Complex Content to Lazy Load
        </ng-template>
    </p-tabPanel>
    <p-tabPanel header="Header 3">
        <ng-template pTemplate="content">
            Complex Content to Lazy Load
        </ng-template>
    </p-tabPanel>
</p-tabView>

Theming

TabView supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.

Resources

Visit the PrimeNG TabView showcase for demos and documentation.