Currently I am working on a material tab feature where I aim to dynamically generate tabs based on the values from my JSON data.
Below is the JSON data:
[
{
"regionName": "EMEA",
"regionCurrency": "USD",
"organizationName": "XYZ",
"organizationSubName": "Miller",
"Department": [
{
"DepartmentName": "Main",
"FirstName": "David",
"LastName": "Brown",
"Band": 2,
"Salary": 10000.00
},
{
"DepartmentName": "Main 1",
"FirstName": "Marry",
"LastName": "Brown",
"Band": 2,
"Salary": 10000.00
}
]
}
]
The generated tabs should display department names like this:
Main | Main 1
I am attempting to implement this using Angular Material tab component and here is the code snippet:
<mat-tab-group mat-align-tabs="start">
<mat-tab *ngFor="let item of rowData.Department" label="{{rowData.DepartmentName}}"></mat-tab>
</mat-tab-group>
However, the tabs are not showing up in the modal. I would appreciate your feedback on whether my approach is correct or not. Thank you.