jQWidgets Forums

This topic contains 1 reply, has 2 voices, and was last updated by svetoslav_borislavov 2 years ago.

Viewing 2 posts - 1 through 2 (of 2 total)

Author

Dynamic JqxTab issue Angular Posts
May 15, 2023 at 1:39 pm Dynamic JqxTab issue Angular #133007

Antro
Participant

I’m using dynamic array for jqxtabs as below which is working fine. while appending values to the array is affecting the html. The issue is, instead of Tab, the value “FOURTH” is displaying in browser as text(kind of normal list
).
HTML:
<jqxTabs >
<ul style=”margin-left:10px;”>
<li *ngFor=”let i of data” >{{ i}}

<div *ngFor=”let i of data”>
Content of {{i}}
</div>
</jqxTabs>

TS:
data = [‘First’, ‘Second’, ‘Third’];
onEvent(){
data.push(“forth”);
}

May 16, 2023 at 7:39 am Dynamic JqxTab issue Angular #133012

svetoslav_borislavov

Participant

Hi,

Angular directives are not supported inside jqxTabs.
To have dynamic tabs you may create jqxTabs, this way:

app.component.ts:
import { AfterViewInit, Component, ViewChild } from ‘@angular/core’;
import { jqxTabsComponent } from ‘jqwidgets-ng/jqxtabs’;

@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
})
export class AppComponent implements AfterViewInit{
@ViewChild(‘tabs’) tabs!: jqxTabsComponent;

data = [‘First’, ‘Second’, ‘Third’];

ngAfterViewInit(): void {
console.log(this.tabs);
this.tabs.removeFirst();
this.data.forEach(e => {
this.tabs.addLast(e, Content of ${e})
})
}

addTab() {
this.tabs.addLast(‘forth’, Content of forth)
}
}

app.component.html:
<button (click)=”addTab()”>Add Tab</button>
<jqxTabs #tabs [width]=”500″ [height]=”200″>
<ul style=”margin-left:10px;”>

<div></div>
</jqxTabs>

Best regards,
Svetoslav Borislavov

jQWidgets Team
https://www.jqwidgets.com/

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.