Pages

How to Implement Dynamic Tabs in Angular Project

In this post we are going to see how to Implement Tabs in Angular project. we are using two components here to implement this example one is tabscomp and other is ckeditorcomp. here tabscomp is used to implement tabs and ckeditorcomp is used within the tabs.

Here to implement tabs in angular we are going to use ngx-boostrap which is a node module to implement certain bootstrap ui in angular. so first install ngx-boostrap into your project.

npm install ngx-bootstrap --save

after installation of the above module we need bootstrap css file for styling. add the following css file to index.html

<!--- index.html -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
for the node module to work we should import it to root module. so first import the module as given below. in my case i'm importing it in app.module.ts

import { TabsModule } from 'ngx-bootstrap';

@NgModule({
...
imports: [TooltipModule.forRoot(),...]
...
})

Next create two component as explained above. execute the below given code in your cli to create components.

ng generate component tabscomp
ng generate component ckeditorcomp

Now open tabscomp.html file, copy and paste the below given code and refresh your project.

<h4>Normal Tabs(static)</h4> <div>   <tabset>     <tab heading="Basic title" id="tab1">Basic content</tab>     <tab heading="Basic Title 1">Basic content 1</tab> <tab heading="Basic Title 2">Basic content 2</tab>   </tabset> </div>

you should see page with tabs as shown below. this does not need any ts code to work.


next we will implement dynamic tabs, copy and paste the below code to your tabscomp.html file just below the recently added code.

<h4>Dynamic Tabs</h4> <button type="button" class="btn btn-primary btn-sm" (click)="newTab()"> Add new tab </button> <button type="button" class="btn btn-primary btn-sm" style="margin-left:5px;"(click)="tabs = []" *ngIf="tabs.length"> Remove all tabs </button> <tabset style="margin-top: 7px;s"> <tab heading="Static title">Static content</tab> <tab *ngFor="let tabz of tabs" [heading]="tabz.title" [active]="tabz.active" (select)="tabz.active = true" (deselect)="tabz.active = false" [disabled]="tabz.disabled" [removable]="tabz.removable" (removed)="removeTabHandler(tabz)" [customClass]="tabz.customClass"> {{tabz?.content}} </tab> </tabset>


as you can see the above code contains *ngFor which takes array from ts to loop the code in html file. it also contains various others like  [heading],[active] , (select)(deselect),[disabled] ,[removable],(removed),[customClass]etc. 

  • Heading directive is used to display the given heading 
  • active takes boolean as its value when true the given tab will be in active state. 
  • select is called when the user selects a tab. 'tabz.active = true' is executed when one of the tabs is selected.
  • deselect is called when the tab is out of focus.  'tabz.active = false' is executed when one of the tab gets out of focus.
  • disabled takes boolean as value. by default it will be false, when true is set the tab will still be visible buy use cannot interact with it.
  • removable also takes boolean as value. when set to true the tab can be removed from the array of tabs listed.
  • removed is called when user tries to delete the tab. here we will be calling a function when the tab is selected for deletion.
  • we can add styling to the individual tabs with customClass directive.
next copy and paste the following code to your tabscomp.component.ts file.

this.tabs = [  { title: 'new Tab 1', content: 'new Tab content 1' removable: true},  { title: 'new Tab Title 2', content: 'new Tab content 2' removable: true },  { title: 'new Tab Title 3', content: 'new Tab content 3', removable: true } ]; newTab(){  const newTabIndex = this.tabs.length + 1;  this.tabs.push({ title: `new Tab Title ${newTabIndex}`, content: `new Tab content ${newTabIndex}`, disabled: false, removable: true }); } removeTabHandler(tab){   this.tabs.splice(this.tabs.indexOf(tab), 1); console.log('Tab removed'); }


  • Here tabs array contains all the tabs that we need to be displayed on our page. we can add title, content, removable, active, disabled stc to customize the tabs.
  • newTab() method is used to add new tabs to the existing tabs, it should also include the details like title, content etc.
  • removeTabHandler() method removes particular tab from the tabs array.


Below code is about adding components inside tabs other than plain text.
copy and paste the below given code to your appcomp.html file.

<div>
<h4>Add components with Dynamic Tabs</h4> <button type="button" class="btn btn-primary btn-sm" (click)="newTabcomp()"> Add new tab </button> <button type="button" class="btn btn-primary btn-sm" style="margin-left:5px;"(click)="tabs1 = []" *ngIf="tabs.length"> Remove all tabs </button>
</div> <tabset style="margin-top: 7px;s"> <tab heading="Static title">Static content</tab> <tab *ngFor="let tabz of tabs1" [heading]="tabz.title" [active]="tabz.active" (select)="tabz.active = true" (deselect)="tabz.active = false" [disabled]="tabz.disabled" [removable]="tabz.removable" (removed)="removeTabHandler1(tabz)" [customClass]="tabz.customClass"> <div [ngSwitch]="tabz?.content">  <app-ckeditorcomp *ngSwitchCase="'testcomp'"></app-ckeditorcomp>   </div> </tab> </tabset>

as you can see the difference from the above code is addition of the below given code. rest of the code is similar to code which we have seen earlier.

<div [ngSwitch]="tabz?.content">
 <app-ckeditorcomp *ngSwitchCase="'testcomp'"></app-ckeditorcomp> </div>

  • [ngSwitch] directive on a container specifies an expression to match against. The expressions to match are provided by ngSwitchCase directives on views within the container.
  • Every view that matches is rendered.
  • Here we are giving the ngSwitchCase as 'testcomp'  to app-ckeditorcomp. if [ngSwitch] gets testcomp the it will display ckeditorcomp component.


Incase if you are thinking what is ckeditorcomp  doing here, i've made a post regarding CKEditor , do check it out.
Next you can copy and paste the below given ts code to you appcomp.ts file. here the only difference is we will be giving a static text to content which is also given to ngSwitchCase  of component tag which is to be displayed.

<import { Component, OnInit } from '@angular/core'; @Component({    selector: 'app-tabscomp',    templateUrl: './tabscomp.component.html',    styleUrls: ['./tabscomp.component.css'] }) export class TabscompComponent implements OnInit {   tabs: any = [];   tabs1: any = [];   newTabIndex: any;   constructor() { this.tabs1 = [ { title: 'new Tab 1', content: 'new Tab content 1' removable: true}, ];    }    ngOnInit() {}    newTabcomp(){ const newTabIndex = this.tabs.length + 1; this.tabs1.push({   title: `new Tab Title ${newTabIndex}`,   content: `testcomp`,          disabled: false,   removable: true, });     }     removeTabHandler1(tab){ this.tabs1.splice(this.tabs.indexOf(tab), 1); console.log('Remove Tab handler');     } }

That's it, please feel free to comment if you have any doubts or if the code does not work.

vinay kumar

Founder of Gowriter.Blogspot.com, Tech Enthusiast, Normal type of Person with passion toward's work.

No comments: