Search results

Adding dynamic items with content reuse in Angular Tabs component

22 Jul 2021 / 2 minutes to read

You can add dynamic tabs by reusing the content using Angular TemplateRef. Tabs can be added dynamically by passing array of items and index value to the addTab method.

Content reuse can be achieved by using the following steps:

  1. Create a TemplateRef variable in your component(app.component.ts) file.
  2. Access the TemplateRef using ViewChild on the <ng-template> element.
  3. Provide separate TemplateRef declaration for each angular component and pass content by dynamically adding tab. It will reuse the content of angular component.

Refer to the following sample.

Source
Preview
app.component.ts
app.module.ts
date-picker.component.ts
drop-down.component.ts
main.ts
app.component.html
date-picker.component.html
drop-down.component.html
index.css
Copied to clipboard
import { Component, ViewChild, OnInit, TemplateRef } from '@angular/core';
import { createElement } from '@syncfusion/ej2-base';
import { TabComponent, SelectEventArgs  } from '@syncfusion/ej2-angular-navigations';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

/**
 * Content reuse
 */

@Component({
  selector: 'my-app',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
})

export class AppComponent {
  @ViewChild('element') tabObj: TabComponent;
  @ViewChild('DatePickertemplateRef') public DatePickertemplate: TemplateRef<any>;
  @ViewChild('FirstDropDowntemplateRef') public FirstDropDowntemplate: TemplateRef<any>;
  @ViewChild('SecondDropDowntemplateRef') public SecondDropDowntemplate: TemplateRef<any>;
  @ViewChild('ThirdDropDowntemplateRef') public ThirdDropDowntemplate: TemplateRef<any>;

  public firstDropDownData: string[] = [
'Badminton',
'Basketball',
'Cricket',
'Golf',
'Hockey',
'Rugby'
  ];

  public secondDropDownData: string[] = [
'Cricket',
'Golf',
'Hockey',
'Rugby',
'Badminton',
'Basketball'
  ];

  public thirdDropDownData: string[] = [
'Rugby',
'Badminton',
'Basketball',
'Cricket',
'Golf',
'Hockey'
  ];

  public tabItemsHeaderText: Object = [{ 'text': 'DatePicker' }, { 'text': 'Dropdown' }, { 'text': 'Reused Dropdown' }];

  public addButtonClicked(e: any): void {
var newtabItem = [
  { header: { text: 'DynamicTabItem' }, content: this.ThirdDropDowntemplate }
];
this.tabObj.addTab(newtabItem,1);
  }

  public removeButtonClicked(e: any): void {
this.tabObj.removeTab(1);
  }

}
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { DropDownListComponent } from '@syncfusion/ej2-angular-dropdowns';
import { DatePickerModule } from '@syncfusion/ej2-angular-calendars';

import { TabAllModule } from '@syncfusion/ej2-angular-navigations';

import { DatePickerComponent } from './date-picker.component';
import { DropDownComponent } from './drop-down.component';

import { AppComponent } from './app.component';

@NgModule({
  imports: [TabAllModule, BrowserModule, FormsModule, DatePickerModule ],
  declarations: [AppComponent, DatePickerComponent, DropDownComponent, DropDownListComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }
Copied to clipboard
import { Component, Input, ViewChild } from '@angular/core';
import { DropDownListComponent } from '@syncfusion/ej2-angular-dropdowns';
import { DatePickerModule } from '@syncfusion/ej2-angular-calendars';

@Component({
  selector: 'date-picker',
  templateUrl: './date-picker.component.html',
  styles: [`h1 { font-family: Lato; }`]
})
export class DatePickerComponent  {
  target: string = document.querySelector('.e-toolbar-item.e-active .e-tab-text').innerHTML;
     
}
Copied to clipboard
import { Component, Input, ViewChild } from '@angular/core';
import { DropDownListComponent } from '@syncfusion/ej2-angular-dropdowns';
import { DatePickerModule } from '@syncfusion/ej2-angular-calendars';

export let ddlObject: DropDownListComponent;

@Component({
  selector: 'drop-down',
  templateUrl: './drop-down.component.html',
  styles: [`h1 { font-family: Lato; }`]
})
export class DropDownComponent  {
  target: string = document.querySelector('.e-toolbar-item.e-active .e-tab-text').innerHTML;
  @ViewChild('samples') ddlObj: DropDownListComponent;

  public height: string = '220px';
     // defined the array of data
  @Input() data: string[];

   public changed(e: any){
    ddlObject = this.ddlObj;   
  }
}
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Copied to clipboard
<ng-template #DatePickertemplateRef>
    <date-picker></date-picker>
</ng-template>

<ng-template #FirstDropDowntemplateRef>
  <drop-down [data]="firstDropDownData"></drop-down>
</ng-template>

<ng-template #SecondDropDowntemplateRef>
  <drop-down [data]="secondDropDownData"></drop-down>
</ng-template>

<ng-template #ThirdDropDowntemplateRef>
  <drop-down [data]="thirdDropDownData"></drop-down>
</ng-template>

<button id='add' class='e-btn' (click)='addButtonClicked($event)'>Click to add</button>
<button id='remove' class='e-btn' (click)='removeButtonClicked($event)'>Click to remove</button>

<ejs-tab id="element" #element>
	<e-tabitems>
		<e-tabitem [header]='tabItemsHeaderText[0]' [content]="DatePickertemplate"></e-tabitem>
		<e-tabitem [header]='tabItemsHeaderText[1]' [content]="FirstDropDowntemplate"></e-tabitem>
		<e-tabitem [header]='tabItemsHeaderText[2]' [content]="SecondDropDowntemplate"></e-tabitem>
	</e-tabitems>
</ejs-tab>
Copied to clipboard
<h1>{{target}} Content</h1>
<br />
<ejs-datepicker></ejs-datepicker>
Copied to clipboard
<h1>{{target}} Content</h1>
<br />
<ejs-dropdownlist #samples [dataSource]='data'  [placeholder]='placeholder'   [popupHeight]='height' (change)=changed($event)></ejs-dropdownlist>
Copied to clipboard
@import url('https://fonts.googleapis.com/css?family=Raleway:300,700');

body {
    padding: 3em;
    font-family: 'Raleway', 'Arial';
}
ul {
    list-style-type:none;
    margin:0 0 2em 0;
    padding:0;
}
ul li a {
    font-size: 1.5em;
}
a {
    color:#fff;
    text-decoration:none;
}