Blazor Ebook
A quick guide to getting started with learning and improving your skills using Blazor technology.
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:
<ng-template> element.Refer to the following sample.
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);
}
}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
@Input() data: string[];
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);<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><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;
}