How to dynamically add tabs with layout for angular?

[softboy99]

How to dynamically add tabs with layout for angular?

[jarry]

This is the example shows how to create tab panels dynamically.

Code:

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'
	}];
}

[softboy99]

Hi,
Thanks. Sorry for the confusion, your code is static,what i mean to dynamically add tabs and load content compent, which load data from remote server.

[jarry]

To add a new tab panel, just new a 'tabs' entry with 'content' property. This 'content' property value can be retrieved from your remote server. Please look at this example.

Code:

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

[softboy99]

Hi,
Thanks for your help. In addition, can we dynamically load another angular component,which has it own UI design and data from remote server, to the newly added tab? Any sample code?

[jarry]

You can nest any components inside a panel component. Please look at this example:
https://www.jeasyui.com/demo-angular/main/index.php?plugin=FileButton&theme=material&dir=ltr&pitem=Select%20Files&sort=

[softboy99]

Hi,
In your sample, there is only one component. There is no component created and load dynamically. Are you sure the sample?

[jarry]

Please open https://angular.io/guide/dynamic-component-loader to learn how to add components dynamically.

[softboy99]

Hi，
Is there api method like addTab in ts code not the template way in your sample code? Just like Jquery EasyUI?

[softboy99]

Hi :
Could you please kindly give us a sample of this? Thanks a lot for your great help.

[jarry]

No dom operating methods are available. You should prevent from creating dom elements directly like jQuery.

[softboy99]

Hi,
Could you give us sample for dynamically add tab and load another angular component to the added tab? I searched the web.Most of them is static way.