Static and Dynamic Tabs in Angular

Hi, There
This page is related to creating static and dynamic tabs in angular.
Here I am using ngb library. In the market, you can get many libraries that support tab features. Some of them are as follow,

* Prime NG https://www.primefaces.org/primeng/#/tabview
* NGB Tabset https://ng-bootstrap.github.io/#/components/tabset/examples
* Angular material https://material.angular.io/components/tabs/overview

Below steps will help you to create tabs in Angular by using ngb library .

1) Install ngbModule from cli.

npm install --save @ng-bootstrap/ng-bootstrap

2) Import ngbModule In app.module.ts

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({

imports: [
NgbModule
]
});

3) In tabexample.component.html add this code first tabset is for static and second for dynamic.

<!--For the static tab-->

<ngb-tabset (tabChange)="checkThis()">
  <ngb-tab title="Tab One">
    <ng-template ngbTabContent>
      tab one content
    </ng-template>
  </ngb-tab>

  <ngb-tab title="Tab two">
    <ng-template ngbTabContent>
      tab two content
    </ng-template>
  </ngb-tab>


  <ngb-tab title="Tab three">
    <ng-template ngbTabContent>
      tab three content
    </ng-template>
  </ngb-tab>


</ngb-tabset>

<br><br>


<!--For the dynamic tab..-->


<strong>
  Another tab having dynamically content
</strong>


<div>
  <ngb-tabset (tabChange)="callBackend($event)" [destroyOnHide]="false">
    <ngb-tab *ngFor="let tab of alltabs" [title]="tab.tabname" [id]="tab">
      <ng-template ngbTabContent>
        <table class="table-view">
          <tr>
            <th>ID</th>
            <th>NAME</th>
            <th>PHONE</th>
            <th>USERNAME</th>
            <th>WEBSITE</th>
            <th>EMAIL</th>
            <th>COMPANY</th>
            <th>ADDRESS</th>
          </tr>
          <tr>
            <td>{{contentdata.id}}</td>
            <td>{{contentdata.name}}</td>
            <td>{{contentdata.phone}}</td>
            <td>{{contentdata.username}}</td>
            <td>{{contentdata.website}}</td>
            <td>{{contentdata.email}}</td>
            <td>{{contentdata.company.name}}</td>
            <td>{{contentdata.address.street + " " + contentdata.address.city}}</td>

          </tr>
        </table>
      </ng-template>

    </ngb-tab>
  </ngb-tabset>
</div>

4) In tabexample.component.ts add below code

import {Component, OnInit} from '@angular/core';
import {TabService} from '../../provider/tab.service';

@Component({
  selector: 'app-tabexample',
  templateUrl: './tabexample.component.html',
  styleUrls: ['./tabexample.component.scss']
})
export class TabexampleComponent implements OnInit {

  alltabs: any[];
  contentdata: any;
  private url = 'https://jsonplaceholder.typicode.com/users';


  constructor(private tabservice: TabService) {
    this.alltabs = [
      {
        tabname: 'tab one',
        tabid: 1,
        tabNumber: 122
      },
      {
        tabname: 'tab two',
        tabid: 2,
        tabNumber: 233

      },
      {
        tabname: 'tab three',
        tabid: 3,
        tabNumber: 344

      },
      {
        tabname: 'tab four',
        tabid: 4,
        tabNumber: 455

      }
    ];
    console.log(this.alltabs);
  }

  ngOnInit() {
    this.tabservice.methodGet(this.url + '/' + 1).subscribe(
      response => {
        this.contentdata = response;
        console.log(this.contentdata);
      }
    );
  }

  checkThis() {
    console.log('checking tab ');
  }

  callBackend($event: any) {
    console.log('calling backend ............' + $event);
    let data = $event.nextId;
    this.tabservice.methodGet(this.url + '/' + data.tabid).subscribe(
      response => {
        this.contentdata = response;
        console.log(this.contentdata);
      }
    );


  }

}

5) To call dynamic data to create services class as tab.services.ts and below code

import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class TabService {

  constructor(private http: HttpClient) {
  }

  methodGet(url: any) {
    return this.http.get(url);
  }
}

Let me know if you have any questions and comments.