I have a problem with BOOTSTRAP TABS

  1. MDB Home Page
  2. Support Main Page
  3. General Bootstrap questions
Topic: I have a problem with BOOTSTRAP TABS

vizmedia pro asked 7 years ago

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

Adrian Sawicki answered 7 years ago

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"};
	}
HTML: 

<!-- 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>
I've shown it just to let you see some of the possibility it gives. Of course, it still missing something but thanks to people like you, we can improve this project. Thanks for the suggestion, we will try to add more customization to it.

sc_guy pro commented 7 years ago

Would you please add this to the documentation. Thanks.

vizmedia pro answered 7 years ago

Thx
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Resolved

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
vizmedia
Pro User
94Support score
9Questions 15Answers
0Snippets likes 0Snippets