Outlined below is the structure of my drop-down list:
Companies > Depots
Each company has multiple depots. I have developed a component for companies, and upon clicking on a company (menu item), an HTTP request is made to bring all companies which are then looped through in the company component. The same process is followed for depots (menu item inside a company) where a list of depots is retrieved and displayed within the depot component.
However, I am facing an issue. When I retrieve the list of depots upon clicking on depots (menu item) and loop through them, all depots of all companies show the same list. This means the depot list of all depot components available on the page are being bound together.
I simply want to display the list of depots specific to that particular company.
Any assistance on this matter would be greatly appreciated.
The code snippet is as follows:
The Hierarchy is => Company->Depot
<a href="javascript:void(0)" (click)="onClickCompanies()">company</a>
<!-- code of company component starts here -->
<ul>
<li *ngFor="let company of companies" class="childul levels">
<a href="javascript:void(0)" >{{company.CompanyName}}</a>
<ul class="nested-menu-items parentsul">
<li class="childul levels">
<a href="javascript:void(0)" (click)="onClickDepot(company.CompanyID)">Depots</a>
<!-- code of depot component starts here -->
<ul class="nested-menu-items parentsul">
<li class="childul levels" *ngFor="let companyDepot of companyDepots">
<a href="javascript:void(0)">{{companyDepot.DepotName}}</a>
</li>
</ul>
<!-- code of depot component ends here -->
</li>
</ul>
</li></ul><!-- code of company component ends here -->
This is the application view :
The image shows the outcome after clicking on the depot of New Company 2, which also gets appended to New Company 1 and subsequently all others too.