how to display different lists by a dynamic tab system? - html

Question

I have an array of objects with the following structure:
[{
"name": "Equipment",
"functional_id": "furniture",
"products": [
{
"file": "data:image/;base64,",
"name": "White bags",
"description": "Reusable",
"id": 11,
"path": "",
"items": [
{
"name": "Small model",
"description": "25",
"price": 0,
"functional_id": "white_bags_small_model_by_25"
},
{
"name": "Medium model",
"description": "20",
"price": 0,
"functional_id": "white_bags_medium_model_by_20"
},
{
"name": "Large model",
"description": "10",
"price": 0,
"functional_id": "white_bags_large_model_by_10"
}
]
},
{
"file": "data:image/;base64,",
"name": "Burgundy bags",
"description": "Reusable",
"id": 12,
"path": "",
"items": [
{
"name": "Small model",
"description": "25",
"price": 0,
"functional_id": "bags_burgundy_bags_small_model_by_10"
},
{
"name": "Large model",
"description": "Par 10",
"price": 0,
"functional_id": "bags_burgundy_bags_large_model_by_10"
}
]
}
],
"sorting": 2300"
},
{
"name": "Documents",
"functional_id": "docs",
"products": [
{
"file": "data:image/;base64,",
"name": "Book of conventions",
"id": 17,
"path": "",
"items": [
{
"price": 0,
"functional_id": "agreement_book"
}
]
},
{
"file": "data:image/;base64,",
"name": "Procedure posters",
"description": "Procedure",
"id": 18,
"path": "",
"items": [
{
"price": 0,
"functional_id": "posters_procedure_of_taking_in_charge"
}
]
},
{
"file": "data:image/;base64,",
"name": "Services Brochures",
"description": "Brochures",
"id": 19,
"path": "",
"items": [
{
"price": 0,
"functional_id": "services_brochures"
}
]
},
{
"file": "data:image/;base64,",
"name": "Catalogue",
"id": 20,
"path": "",
"items": [
{
"price": 0,
"functional_id": "catalogue"
}
]
}
],
"sorting": 2400
},
{
"name": "Products",
"functional_id": "prods",
"products": [
{
"file": "data:image/;base64,",
"name": "Articles",
"id": 19,
"path": "",
"items": [
{
"price": 0,
"functional_id": "book_1"
}
]
},
{
"file": "data:image/;base64,",
"name": "Procedure_b",
"description": "Procedure",
"id": 24,
"path": "",
"items": [
{
"price": 0,
"functional_id": "book_charge"
}
]
},
{
"file": "data:image/;base64,",
"name": "Book Services",
"description": "Book Services",
"id": 26,
"path": "",
"items": [
{
"price": 0,
"functional_id": "book_services"
}
]
},
{
"file": "data:image/;base64,",
"name": "Catalogue",
"id": 32,
"path": "",
"items": [
{
"price": 0,
"functional_id": "catalogue"
}
]
}
],
"sorting": 4400
}
]
and I represent it in my application with the following html:
<div class='col-lg-12' *ngIf="this.market && this.market.length>0 ">
<ng-container *ngFor='let category of this.market | orderBy:"sorting"'>
<h2>{{category.name}}</h2>
<table class='table table-bordered bg-white'>
<thead class='bg-quinary d-xl-table-row d-none'>
<th>Produits</th>
<th>Description</th>
<th>Prix HT</th>
<th>Quantités</th>
</thead>
<tbody>
<tr *ngFor='let product of category.products | orderBy:"id"' class=" ">
<td>
<div class="d-flex">
<div *ngIf="product && product.path " style="width: 150px">
<img class="img-fluid" src="{{product.file}}" alt="" width="150px">
</div>
<div style="flex: 5" class="p-2">
<h2 class="p-1">{{product.name}}</h2>
<p [innerHTML]="product.description" class="text-muted" *ngIf=" product && product.description"></p>
</div>
</div>
</td>
<td class="p-0 d-xl-table-cell d-none">
<ul class="p-0 m-0">
<li *ngFor='let item of product.items'>
<div style="line-height: 24px" class="">
<p>{{item.name}}</p>
<p class="text-muted">{{item.description}}</p>
</div>
</li>
</ul>
</td>
<td class="p-0 d-xl-table-cell d-none">
<ul class="p-0 m-0">
<li *ngFor='let item of product.items'>
<span>{{item.price || '-'}} €</span>
</li>
</ul>
</td>
<td class="p-0 d-xl-table-cell d-none">
<ul class="p-0 m-0">
<li *ngFor='let item of product.items'>
<input type="number" [(ngModel)]="item.quantity" (change)="this.updateCart(item)" style="height: 45px; line-height: 45px" min="0">
</li>
</ul>
</td>
<td class="p-0 d-table-cell d-xl-none w-100">
<ul class="font">
<li *ngFor='let item of product.items' class=" p-3 item">
<div class="d-flex flex-column w-25 align-self-center">
<p>{{item.name}}</p>
<p class="text-muted">{{item.description}}</p>
</div>
<span class="d-flex flex-column w-25 align-self-center">{{item.price || '-'}} €</span>
<input class="d-flex flex-column w-25 align-self-center" type="number" [(ngModel)]="item.quantity" (change)="this.updateCart(item, product.id)" style="height: 45px" min="0" >
</li>
</ul>
</td>
</tr>
</tbody>
</table>
</ng-container>
</div>
Since the list of the different types of products is very wide (I have simplified the array of objects), a very large scroll is generated.
I am trying to create, following the same list style, a system of tabs through which to load the different types of products according to the tab you select.
To do this I am trying to use the following bootstrap component
<div class='col-lg-12' *ngIf="this.market && this.market.length>0 ">
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" style="background-color: #0e5fa4;" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true"><p style="font-weight: bold; font-size: 15px; color: white; padding: 0;">Equipment</p></a>
<a class="nav-item nav-link" style="background-color: white; border: 0.5px solid #0e5fa4;" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Documents</a>
<a class="nav-item nav-link" style="background-color: white; border: 0.5px solid #0e5fa4;" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Products</a>
</div>
</nav>
In this way, the only thing I have managed to do is to show the different types of products in the different tabs in a static way, but I cannot make the dynamic navigation between them.
If someone sees what I'm doing wrong.
A greeting and thank you in advance

Answer 1

Here is a barebones implementation of dynamic tabs in Angular, with a list of items in each tab. Demo up on Stackblitz.
Template:
<!-- Tab Buttons -->
<ul class="tabs">
<li *ngFor="let tab of tabs; let i = index">
<button (click)="selectedTab = i" [ngStyle]="selectedTab === i && {'background':'blue', 'color':'white'}">{{tab.label}}</button>
</li>
</ul>
<!-- Tab Content -->
<div>
<h3>{{tabs[selectedTab].label}}</h3>
<ul>
<li *ngFor="let item of tabs[selectedTab].items">{{item}}</li>
</ul>
</div>
Component:
tabs = [
{
label: 'Products',
items: ['Ball', 'Car', 'Bricks']
},
{
label: 'People',
items: ['Alice', 'Bob', 'Chris']
}, {
label: 'Animals',
items: ['Dog', 'Cat', 'Mouse']
}
];
selectedTab = 0;
tabs in the component represents an array of the objects you want to present with tabs. This is far simpler than the data structure you've posted, but the principles are the same.