I am currently working with angular 7 in combination with angular materials.
In my project, I have implemented a tab as well as a selection list. What I aim to achieve is that the items displayed in the selection list are dependent on the chosen tab in the tab-group.
At present, I am contemplating the best approach to make this functionality possible. One idea I had was to create a function that dynamically generates a new list based on two existing lists and a common property within the data.
The tab-group primarily consists of alphabet letters, which would then be added as a property to the objects within the list.
Would you happen to know a more efficient way to accomplish this task?
This is how my code looks like:
<mat-tab class="error-label mat-tab-labels-errors" *ngFor="let areaItem of areaList, let i = index"
<mat-list-option *ngFor="let err of errors" [value]="err.id">
Within the TypeScript file:
areaList: string[] = ['A', 'B', 'C', 'D', 'L', 'T'];
errors = [
{ id: 'A7', clientName: 'fd', type: 'A' },
{ id: 'B1', clientName: 'sdfdfsu', type: 'B' },
{ id: 'E3', clientName: 'sdf', type: 'C' },
{ id: 'I2', clientName: 'fsdfu', type: 'D' },
{ id: 'L', clientName: 'sdfsf', type: 'L' },
{ id: 'L', clientName: 'sdfsf', type: 'T' }
];