EasyUI Forum

import { Component } from '@angular/core';

@Component({
	selector: 'app-root',
	template: `
		<eui-tabs style="height:250px">
			<eui-tab-panel *ngFor="let tab of tabs" [title]="tab.title">
				<p>{{tab.content}}</p>
			</eui-tab-panel>
		</eui-tabs>
	`
})
export class AppComponent {
	tabs = [{
		title: 'Tab1',
		content: 'Content1'
	},{
		title: 'Tab2',
		content: 'Content2'
	},{
		title: 'Tab3',
		content: 'Content3'
	}];
}

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
	selector: 'app-root',
	template: `
		<button (click)="addTab()">add tab</button>
		<eui-tabs [selectedIndex]="selectedIndex" style="height:250px">
			<eui-tab-panel *ngFor="let tab of tabs" [title]="tab.title">
				<div *ngIf="tab.content" [innerHTML]="tab.content"></div>
			</eui-tab-panel>
		</eui-tabs>
	`
})
export class AppComponent {
	selectedIndex = 0;

	tabs:[any] = [{
		title: 'Tab1',
		content: 'Content1'
	},{
		title: 'Tab2',
		content: 'Content2'
	},{
		title: 'Tab3',
		content: 'Content3'
	}];

	constructor(private http: HttpClient, private sanitizer: DomSanitizer){}

	addTab() {
		this.http.get('...',{responseType:'text'}).subscribe(data => {
			let content = this.sanitizer.bypassSecurityTrustHtml(data);			
			this.tabs.push({
				title: 'New Tab',
				content: content
			});
			setTimeout(() => this.selectedIndex = this.tabs.length-1);
		});
	}
}