ngb-tabset install - Shell/Bash

Introduction

ngb-tabset is a component of the Ngx-Bootstrap library that provides a simple yet powerful way to implement tabs in Angular applications. With ngb-tabset, you can easily create a tabbed interface and switch between different views.

In this tutorial, we will learn how to install ngb-tabset in a Shell/Bash environment and use it in your Angular project.

Prerequisites

Before we get started, ensure that you have the following:

• Shell/Bash terminal
• Node.js and NPM
• Angular CLI
• Ngx-Bootstrap library

Installation

To install ngb-tabset, follow the steps below:

1. Open your Shell/Bash terminal.
2. Create a new Angular project using the Angular CLI with the following command:

ng new my-project

Replace my-project with the name of your project.

3. Change into the project directory:

cd my-project

4. Install Ngx-Bootstrap:

npm install ngx-bootstrap

5. Import ngb-tabset in your component:

import { Component } from '@angular/core';
import { NgbTab, NgbTabChangeEvent } from 'ngx-bootstrap/tabs';

@Component({
  selector: 'app-root',
  template: `
    <ngb-tabset (tabChange)="onTabChange($event)">
      <ngb-tab title="Tab 1" id="tab1">
        <ng-template ngbTabContent>
          Tab 1 content
        </ng-template>
      </ngb-tab>
      <ngb-tab title="Tab 2" id="tab2">
        <ng-template ngbTabContent>
          Tab 2 content
        </ng-template>
      </ngb-tab>
    </ngb-tabset>
  `
})
export class AppComponent {
  onTabChange(event: NgbTabChangeEvent) {
    console.log(event.nextId);
  }
}

6. Run the Angular project:

ng serve

7. Open your web browser and go to http://localhost:4200/ to see the ngb-tabset in action.

Conclusion

ngb-tabset is a powerful component that simplifies the implementation of tabs in Angular applications. By following the steps in this tutorial, you should have successfully installed ngb-tabset and implemented it in your Angular project.