Dynamic Tabs Create in Angular using Angular Material -

In this article, we’ll learn how to create dynamic tabs to create angular using Angular material. Some days ago we learn Autocomplete with chip style in Angular using Angular Material.
To start implementing dynamic tabs first, we need to install the angular material module in our application run the below command to install the module.


npm i @angular/material
npm i @angular/flex-layout

After installing the module lets add a module in our app.module.ts file. We need to import some modules to use our application called Button, Input, TabsModule display in the below code.


......
import {MatInputModule} from '@angular/material/input';
import {MatTabsModule} from '@angular/material/tabs';
.......
@NgModule({
imports:[ 
..., 
MatInputModule,
MatTabsModule
...,   
],
....
})

After adding a module in the app.module file we can use it in our component to darw the tabs. Let’s create app.component.ts file to assign some defult values and function for create dynamic add tab and delete tab.


  addTab(selectAfterAdding: boolean) {

//if title we pass then add the title of the tab elase name with new
    if(this.tabtitle != ''){
       this.tabs.push(this.tabtitle);
    }else{
       this.tabs.push('New');
    }
   
    this.tabtitle = '';

    if (selectAfterAdding) {
      this.selected.setValue(this.tabs.length - 1);
    }

  }
// Remove the tabs
removeTab(index: number) {
    this.tabs.splice(index, 1);
  }

Display below is the code for the app.component.ts ,app.component.html


/*
https://www.eduforbetterment.com/
*/
import {COMMA, ENTER} from '@angular/cdk/keycodes';
import {Component, ElementRef, ViewChild} from '@angular/core';
import {FormControl} from '@angular/forms';


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
 
  tabs = ['Tab 1', 'Tab 2', 'Tab 3'];
  selected = new FormControl(0);
  tabtitle:string = '';

  addTab(selectAfterAdding: boolean) {

    if(this.tabtitle != ''){
       this.tabs.push(this.tabtitle);
    }else{
       this.tabs.push('New');
    }
   
    this.tabtitle = '';

    if (selectAfterAdding) {
      this.selected.setValue(this.tabs.length - 1);
    }


  }

  removeTab(index: number) {
    this.tabs.splice(index, 1);
  }

}


<div class="">

<h2>Dynamic Tabs Example</h2>
  <div>
    <mat-form-field style="width:100%">
      <table class="example-full-width" cellspacing="0">
          <tr>
            <td>
              <mat-label>Tab Name</mat-label>
              <input matInput  [(ngModel)]="tabtitle" >
            </td>
            <td>
              <button mat-raised-button
                  class="example-add-tab-button"
                    (click)="addTab(selectAfterAdding.checked)">
              Add new tab
            </button>
            </td>
            <td>
              <mat-checkbox #selectAfterAdding> Select tab after adding </mat-checkbox>
        
          </td>
        </tr>
      </table>
   </mat-form-field>
  
</div>

<mat-tab-group [selectedIndex]="selected.value"
               (selectedIndexChange)="selected.setValue($event)">
  <mat-tab *ngFor="let tab of tabs; let index = index" [label]="tab">

    <br>  <br>
    Contents for {{tab}} tab

    <button mat-raised-button
            class="example-delete-tab-button"
            [disabled]="tabs.length === 1"
            (click)="removeTab(index)">
      Delete Tab
    </button>
     <br> <br> <br>
  </mat-tab>
</mat-tab-group>

</div>


<!-- Copyright 2020 Google LLC. All Rights Reserved.
    Use of this source code is governed by an MIT-style license that
    can be found in the LICENSE file at http://angular.io/license -->

Output

Below is the full embeded code for the dynamic tabs add using angular material you can easily used in your application.
Example

Spread the love

Education For Betterment

Dynamic Tabs Create in Angular using Angular Material

About The Author

Jugal Rana

Related Posts

About The Author