A Tree-View Angular Component Tale
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 are going to step through all the different challenges that arise in the process and explore different options for structuring our state, defining our actions, effects and reducers as well as laying out the architecture of the component in question.
Story Outline
This story is lengthy enough to be split into several parts:
Knowledge Prerequisites
For the reader to be able to comfortably follow the story, it is assumed that they pertain a good knowledge of Javascript, the latest versions of Angular as well as basic knowledge of NgRx and RxJS.
Software Prerequisites & Version Numbers
Following is a list of the version numbers for each framework and major component used in this project:
- Angular, Angular CLI & NgRx 8.2.0
- Node.js 12.5.0
- npm 6.10.2
- RxJS 6.4.0
- Typescript 3.5.3
The Node server that is readily provided and that we will use in this project was built under MacOS Mojave and it should probably work fine under any Unix-based OS.
Project Repositories
You may find access the GitHub repositories for Files Server and Files App following the links provided.