Sign in

Front-end developer, science nerd, free spirit.

Building a tree-view component may seem a quite straight-forward task at first (it has been in use since the early appearance of user interfaces so its principles and mechanisms are well understood) but the nested information structure and its recursive nature definitely pose some very interesting challenges along the way. In this story, we are going to progressively design and build a tree-view component for an Angular application that uses NgRx. …

We have been successful in our efforts so far to represent the nested structure of a tree in a flat manner and furthermore share this information efficiently down to the last node of our tree view component. To accomplish this, we introduced the Store inside the nested components, thus coupling them tightly with our specific application. In this last part of the story, we will explore ways to turn our TreeViewComponent into a stand-alone component that any application could make use of.

← Read Part 2: Nested Information

Suppose we have finished the development of Files and our tree view…

Having accomplished to list the contents of our local root directory, it is time to start thinking how to make our tree-view component capable of displaying nested levels of directory contents. In this part we will consider a few different architectural options to organise and share this nested information, progressively reaching a solution that fits our Files application the best.

← Read Part 1: Building Foundations

Representing Nested Information

This time, we will start by restructuring our State interface first in order to handle nested directory contents. Remember how we structured it in part 1:

We just needed a flat Node array…

In this part we will set our specifications and develop a high-level plan of how to execute the development of the project. Next, following our plan, we will set up a simple application to host the tree-view component and we will have it display our local root directory contents using a simple server written in Node.

Concept & Specifications

We need our tree-view to be capable of doing two main things:

  1. List all child nodes of a predefined root node.
  2. List nested child nodes of parent nodes when they are expanded (provided they contain such nodes).

You could argue that at a basic…

Ioannes Bracciano

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store