Machine Coding — File Explorer

1. Learning Objectives

In this machine coding guide, you will build a recursive directory tree file explorer. By the end of this exercise, you will be able to:

• Declare and render nested tree node models using Angular recursion.
• Toggle directory visibility states using localized component properties.
• Add new files or folders dynamically to targeted tree levels.
• Delete files or folders, propagating events upwards to parent nodes.
• Apply progressive padding margins based on nesting depth indices.

2. What We Are Building & Design System

Under interview settings, you are tasked with building a folder hierarchy explorer. Requirements include:

• Tree Directory View: Render folder names (with folder icons) and filenames. Clicking a folder collapses or expands its children.
• Actions Panel: Hovering over a folder shows icons to create a sub-file, create a sub-folder, or delete the folder.
• Indentation Layout: Apply indentation of 20px times the current tree depth level to display the tree structure clearly.

3. Step-by-Step Implementation Guide

Step 1: Declare the Tree Node Interface

Construct a model representing directory nodes recursively:

Step 2: Build the Recursive Component

Angular component selectors can reference themselves within their own template. Add custom depth parameters as inputs:

Step 3: Handle Node Additions and Deletions

Implement event emitters to notify parent structures when item deletions or creations occur.

4. Full Working Code

Save this standalone component definition to build the directory browser:

5. Reviewing the Build / Self-Correction Checks

Verify your recursive component loops and actions execute cleanly:

• Check folder toggle cycles: Click a folder node name and verify that child files and folders collapse and expand immediately.
• Verify child event propagation: Add a file inside a nested subfolder. Confirm that deleting that file updates only that subfolder's children without causing parent folder nodes to refresh or collapse.

6. Practice Exercises & Extensions

7. Summary & Next Steps

By building this file explorer, you have configured self-referencing recursive templates, passed indentation variables, and managed child delegation states.

• Next, proceed to **Machine Coding — Kanban** to build drag-and-drop workflow lanes.

---