Topic: I have a problem with BOOTSTRAP TABS
When tabs are created dynamically
ngOnInit() {
let el = new element;
el.Name = "tab A1";
el.tresc = "treść pierwsza";
this.Kolekcja.push(el);
el = new element;
el.Name = "tab A2";
el.tresc = "treść druga";
this.Kolekcja.push(el);
}
show($event) {
console.log("element", $event);
}
<tabset #staticTabs [buttonStyle]="'nav-tabs tabs-2 red'" [contentStyle]="'card'" (showBsTab)="show($event)">
<tab ripple-radius
*ngFor="let element of Kolekcja"
heading="{{element.Name}}">
<div class="row">
<div class="col-12">
{{element.tresc}}
</div>
</div>
</tab>
</tabset>
How can I get a reference to an element in the active tab ?
$event is a reference only to the tab header
my proposition
It would be nice to add an attribute to an object to each tab
<tab ripple-radius
*ngFor="let element of Kolekcja"
heading="{{element.Name}}"
[ActiveModelAddedToEvent]="element"
>
show($event) {
console.log("active element:", $event.ActiveModelAddedToEvent);
}
Add comment
Hello,
We're styling filling up our documentation. You can have access to an object with data like title, content, active etc. I will add your suggestions to our further releases.
Example:
if you would like to change your tab content you can just check if it is active and if it is. Add your content to it.
ts:
public tabs: any[] = [
{title: 'Dynamic Title 1', content: 'Dynamic content 1', index: 1},
{title: 'Dynamic Title 2', content: 'Dynamic content 2', index: 2},
{title: 'Dynamic Title 3', content: 'Dynamic content 3', index: 3}
];
shown($event) {
for(let i = 0; i < this.tabs.length; i++) { this.tabs[i].active === true && this.tabs[i].index === 1 ? this.tabs[i].content = "new content when shown" : "there is no active tabs"};
}
<!-- Tabset tabs -->
<tabset #staticTabs [buttonStyle]="'nav-tabs tabs-3 red'" [contentStyle]="'card'" (shownBsTab)="shown($event)" >
<tab heading="Static title">Static content</tab>
<tab ripple-radius *ngFor="let tabz of tabs"
[heading]="tabz.title"
[active]="tabz.active"
[index]="tabz.index"
(deselect)="tabz.active = false"
(select)="tabz.active = true"
[customClass]="tabz.className">
{{tabz?.content}}
</tab>
</tabset>
sc_guy pro commented 6 years ago
Would you please add this to the documentation. Thanks.FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Resolved
Specification of the issue
- ForumUser: Pro
- Premium support: No
- Technology: General Bootstrap questions
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
Tags