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
Output
Below is the full embeded code for the dynamic tabs add using angular material you can easily used in your application.
Example