Search results

Adding dynamic items with content reuse

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
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);
  }

}
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 { }
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;
     
}
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;   
  }
}
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
<h1>{{target}} Content</h1>
<br />
<ejs-datepicker></ejs-datepicker>
<h1>{{target}} Content</h1>
<br />
<ejs-dropdownlist #samples [dataSource]='data'  [placeholder]='placeholder'   [popupHeight]='height' (change)=changed($event)></ejs-dropdownlist>
@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;
}