import { Component } from '@angular/core'; import { Dy1Component } from './dy1.component'; import { Dy2Component } from './dy2.component'; @Component({ selector: 'app-root', template: ` <h2>Dynamic Tab Content</h2> <eui-linkbutton (click)="addDataGrid(tt)">AddDataGrid</eui-linkbutton> <eui-linkbutton (click)="addNewTab()">AddNewTab</eui-linkbutton> <eui-tabs #tt style="height:250px" [selectedIndex]="selectedIndex" (tabClose)="onTabClose($event)" (tabSelect)="selectedIndex=tt.getPanelIndex($event)"> <eui-tab-panel [title]="'Home'" iconCls="icon-ok"> <p>The home tab.</p> </eui-tab-panel> <eui-tab-panel *ngFor="let tab of tabs" [title]="tab.title" [closable]="true" bodyCls="f-column"> <tab-detail [component]="tab.component" class="f-full f-column"></tab-detail> </eui-tab-panel> </eui-tabs> ` }) export class AppComponent { selectedIndex = 0; tabs = []; onTabClose(panel){ this.tabs = this.tabs.filter(p => p.title != panel.title); } getTabIndex(title){ for(let i=0; i<this.tabs.length; i++){ if (this.tabs[i].title == title){ return i; } } return -1; } addTab(tab){ let index = this.getTabIndex(tab.title); if (index == -1){ this.tabs.push(tab); setTimeout(() => this.selectedIndex = this.tabs.length); } else { this.selectedIndex = index+1; } } addDataGrid(tt) { let tab = {title:'DataGrid',component:Dy1Component}; this.addTab(tab); } addNewTab() { let tab = {title:'NewTab',component:Dy2Component}; this.addTab(tab); } }
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { EasyUIModule } from 'easyui/easyui/easyui.module'; import { AppComponent } from './app.component'; import { TabDetailComponent } from './tab-detail.component'; import { TabDirective } from './tab.directive'; import { Dy1Component } from './dy1.component'; import { Dy2Component } from './dy2.component'; @NgModule({ declarations: [ AppComponent, TabDetailComponent, TabDirective, Dy1Component, Dy2Component ], imports: [ BrowserModule, FormsModule, EasyUIModule ], entryComponents: [ Dy1Component,Dy2Component ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
import { Injectable } from '@angular/core'; import { Observable } from 'rxjs/Rx'; import 'rxjs/add/observable/of'; @Injectable() export class DataService { getColumns(): any { return Observable.of([ {field:'inv',title:'Inv NO'}, {field:'name',title:'Name'}, {field:'amount',title:'Amount'}, {field:'price',title:'Price'}, {field:'cost',title:'Cost'}, {field:'note',title:'Note'} ]); } getData(): any { let total = 10000; let data = []; for(let i=1; i<=total; i++){ let amount = Math.floor(Math.random()*1000); let price = Math.floor(Math.random()*1000); data.push({ inv: 'Inv No '+i, name: 'Name '+i, amount: amount, price: price, cost: amount*price, note: 'Note '+i }); } return Observable.of({ total: total, rows: data }); } }
import { enableProdMode } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app.module'; enableProdMode(); platformBrowserDynamic().bootstrapModule(AppModule);