Designing the UI using Angular2

Question

I am looking to build hierarchy structure of an organization in my web-app front-end. We are currently using Angular2.

This is how it looks like in summarized view:

How it can be done?

Right now I am doing in the following pattern. 1. Load parent group (ABC Company) 2. When someone clicks on it, child organizations should be loaded in the above fashion.

I am trying to store the data in an array & when someone clicks back button in the browser the parent group is getting appended in front of the child group.

Answer 1

What have you tried so far? Seems like a pretty normal setup... could just have a repeater setup against a custom directive which displays the company's details in the expanded view when active.

<div *ngFor="let company of companies" (click)="company.isActive = !company.isActive">
    <my-company-details *ngIf="company.isActive" companyData=company>
</div>