NG Bootstrap Tabs Documentation
Overview
NG Bootstrap provides an easy-to-use tab component that allows users to navigate through multiple sections of content. This documentation will guide you through the process of creating tabs using NG Bootstrap and show you how to use sub components as the content of these tabs.
Sample Code
Below is a sample code snippet that demonstrates how to create tabs using NG Bootstrap:
// nav-basic.html
<ul ngbNav #nav="ngbNav" [(activeId)]="active" class="nav-tabs">
<li [ngbNavItem]="1">
<button ngbNavLink>One</button>
<ng-template ngbNavContent>
<!-- content for tab 1 -->
</ng-template>
</li>
<li [ngbNavItem]="2">
<button ngbNavLink>Two</button>
<ng-template ngbNavContent>
<!-- content for tab 2 -->
</ng-template>
</li>
<li [ngbNavItem]="3">
<button ngbNavLink>Three</button>
<ng-template ngbNavContent>
<!-- content for tab 3 -->
</ng-template>
</li>
</ul>
<div [ngbNavOutlet]="nav" class="mt-2"></div>
<pre>Active: {{ active }}</pre>
// nav-basic.ts
import { Component } from '@angular/core';
import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'ngbd-nav-basic',
standalone: true,
imports: [NgbNavModule],
templateUrl: './nav-basic.html',
})
export class NgbdNavBasic {
active = 1;
}Breaking Down the Code
Let's break down the code into smaller sections to understand how to create tabs using NG Bootstrap:
In your component file (e.g., nav-basic.ts), import the NgbNavModule from @ng-bootstrap/ng-bootstrap:
import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap';In your template file (e.g., nav-basic.html), create an unordered list (ul) with the ngbNav directive:
<ul ngbNav #nav="ngbNav" [(activeId)]="active" class="nav-tabs">
<!-- tab items will go here -->
</ul>The ngbNav directive is used to create the tab navigation. The #nav="ngbNav" syntax creates a reference to the ngbNav directive, which can be used to access the navigation instance. The [(activeId)] syntax binds the active property to the currently active tab.
Inside the ul element, create list items (li) with the ngbNavItem directive:
<li [ngbNavItem]="1">
<button ngbNavLink>One</button>
<ng-template ngbNavContent>
<!-- content for tab 1 -->
</ng-template>
</li>The ngbNavItem directive is used to create a tab item. The [ngbNavItem]="1" syntax sets the id property of the tab item to 1. The button element with the ngbNavLink directive is used to create the tab link. The ng-template element with the ngbNavContent directive contains the content for the tab.
Create a div element with the ngbNavOutlet directive:
<div [ngbNavOutlet]="nav" class="mt-2"></div>The ngbNavOutlet directive is used to create an outlet for the tab content. The [ngbNavOutlet]="nav" syntax binds the outlet to the nav navigation instance.
In your component file (e.g., nav-basic.ts), create a property to store the active tab:
export class NgbdNavBasic {
active = 1;
}The active property is bound to the activeId property of the ngbNav directive using the [(activeId)] syntax.
To use a sub component as the content of a tab, simply replace the ng-template element with the selector for the sub component. For example:
<li [ngbNavItem]="1">
<button ngbNavLink>One</button>
<my-sub-component></my-sub-component>
</li>In this example, the <my-sub-component> selector is used to include an instance of the MySubComponent component as the content of the first tab.
To pass data to a sub component, you can use input properties. For example:
<li [ngbNavItem]="1">
<button ngbNavLink>One</button>
<my-sub-component [data]="someData"></my-sub-component>
</li>In this example, the data input property is used to pass the someData variable to the MySubComponent instance.
In addition to the basic tab navigation markup demonstrated earlier, NG Bootstrap allows for alternative markup without <ul><li> elements. You can also use <button> and <a> elements interchangeably for links. Here's an example of how to create tabs using this alternative markup:
<nav ngbNav #nav="ngbNav" class="nav-tabs">
<ng-container ngbNavItem>
<button ngbNavLink>Button</button>
<ng-template ngbNavContent>
<!-- content for tab 1 -->
</ng-template>
</ng-container>
<ng-container ngbNavItem>
<a ngbNavLink>I'm a link</a>
<ng-template ngbNavContent>
<!-- content for tab 2 -->
</ng-template>
</ng-container>
<ng-container ngbNavItem [disabled]="true">
<button ngbNavLink>I'm a disabled button</button>
<ng-template ngbNavContent>
<!-- content for disabled tab -->
</ng-template>
</ng-container>
<ng-container ngbNavItem [disabled]="true">
<a ngbNavLink>I'm a disabled link</a>
<ng-template ngbNavContent>
<!-- content for disabled tab -->
</ng-template>
</ng-container>
</nav>
<div [ngbNavOutlet]="nav" class="mt-2"></div>In this example, the <nav> element with the ngbNav directive is used to create the tab navigation. The <ng-container> element is used as a wrapper for each tab item. The ngbNavItem directive is applied to the <ng-container> element, which takes the place of the <li> element in the basic markup.
The <button> and <a> elements with the ngbNavLink directive are used to create the tab links. Note that the <button> element is used for the first tab, while the <a> element is used for the second tab. This shows that you can interchange these elements freely.
Additionally, you can set the [disabled] property to true on the <ng-container> element to create a disabled tab. This is demonstrated in the third and fourth tabs in the example above.
The ng-template element with the ngbNavContent directive is used to contain the content for each tab, just like in the basic markup.
The [ngbNavOutlet] directive is used on the <div> element to create an outlet for the tab content, as before.
Finally, the class="nav-tabs" attribute is added to the <nav> element to apply the appropriate CSS styles for the tab navigation.
Here's the corresponding TypeScript code for the component:
import { Component } from '@angular/core';
import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'ngbd-nav-markup',
standalone: true,
imports: [NgbNavModule],
templateUrl: './nav-markup.html',
})
export class NgbdNavMarkup {}
```vbnet
Note that the component definition is the same as before, except for the selector and template URL. The `@Component` decorator is used to define the component metadata, including the selector, imports, and template URL. The `standalone` property is set to `true` to indicate that the component does not require a separate module. The `imports` property is used to import the `NgbNavModule` from `@ng-bootstrap/ng-bootstrap`.
### 9. Using Sub Components with Alternative Markup
To use a sub component as the content of a tab with the alternative markup, simply replace the `ng-template` element with the selector for the sub component. For example:
```html
<nav ngbNav #nav="ngbNav" class="nav-tabs">
<ng-container ngbNavItem>
<button ngbNavLink>Button</button>
<my-sub-component></my-sub-component>
</ng-container>
<ng-container ngbNavItem>
<a ngbNavLink>I'm a link</a>
<my-sub-component></my-sub-component>
</ng-container>
<ng-container ngbNavItem [disabled]="true">
<button ngbNavLink>I'm a disabled button</button>
<ng-template ngbNavContent>
<!-- content for disabled tab -->
</ng-template>
</ng-container>
<ng-container ngbNavItem [disabled]="true">
<a ngbNavLink>I'm a disabled link</a>
<ng-template ngbNavContent>
<!-- content for disabled tab -->
</ng-template>
</ng-container>
</nav>
<div [ngbNavOutlet]="nav" class="mt-2"></div>In this example, the <my-sub-component> selector is used to include an instance of the MySubComponent component as the content of the first and second tabs.
To pass data to a sub component with the alternative markup, you can use input properties just like in the basic markup. For example:
<nav ngbNav #nav="ngbNav" class="nav-tabs">
<ng-container ngbNavItem>
<button ngbNavLink>Button</button>
<my-sub-component [data]="someData"></my-sub-component>
</ng-container>
<ng-container ngbNavItem>
<a ngbNavLink>I'm a link</a>
<my-sub-component [data]="someOtherData"></my-sub-component>
</ng-container>
<ng-container ngbNavItem [disabled]="true">
<button ngbNavLink>I'm a disabled button</button>
<ng-template ngbNavContent>
<!-- content for disabled tab -->
</ng-template>
</ng-container>
<ng-container ngbNavItem [disabled]="true">
<a ngbNavLink>I'm a disabled link</a>
<ng-template ngbNavContent>
<!-- content for disabled tab -->
</ng-template>
</ng-container>
</nav>
<div [ngbNavOutlet]="nav" class="mt-2"></div>In this example, the data input property is used to pass the someData variable to the MySubComponent instance in the first tab, and the someOtherData variable to the MySubComponent instance in the second tab.
That's it! With these steps, you should now be able to create tabs using NG Bootstrap and use sub components as the content of these tabs.