Search results

Adding dynamic items with content reuse in Angular Tabs component

14 Apr 2021 / 1 minute to read

You can add dynamic tabs with angular component content reuse using Angular TemplateRef.

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('DropDowntemplateRef') public DropDowntemplate: TemplateRef<any>;

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

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

  public btnClicked1(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
   public data: string[] = ['Badminton', 'Basketball', 'Cricket', 'Golf', 'Hockey', 'Rugby'];

   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 #DropDowntemplateRef>
    <drop-down></drop-down>
</ng-template>

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

<ejs-tab id="element" #element>
	<e-tabitems>
		<e-tabitem [header]='headerText[0]' [content]="DatePickertemplate"></e-tabitem>
		<e-tabitem [header]='headerText[1]' [content]="DropDowntemplate"></e-tabitem>
		<e-tabitem [header]='headerText[2]' [content]="DropDowntemplate"></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;
}