How to create a recursive, n-level nested task list, where users can add subtasks within...

I want to implement a recursive list structure to support nested sub-notes of arbitrary depth (n-levels)? I'm working on a to-do task list assignment, where I want to enable users to create subtasks within tasks, recursively. While I've managed to achieve this up to 3 levels, I'm experiencing issues adding subtasks beyond the 4th level, despite seeing the array elements being added in the console logs at every click but nothing changes on UI.

<div class="note-container">
<h2>Note-Taking App</h2>

<!-- Add Note Form -->
<div class="add-note">
<input type="text" placeholder="Note Title" #noteTitle />
<textarea placeholder="Note Content" #noteContent></textarea>
<button (click)="addNote(noteTitle.value, noteContent.value)">
Add Note
</button>
</div>

<!-- List of Notes -->
<div class="note" *ngFor="let note of notes">
<h3>{{ note.title }}</h3>
<p>{{ note.content }}</p>

<!-- Add Subtask -->
<div>
<input type="text" placeholder="Add Subtask" #subtaskInput />
<button (click)="addSubtask(note, subtaskInput.value)">+</button>
</div>

<!-- Subtask List -->
<ul>
<ng-container *ngFor="let subtask of note.subtasks">
<li>
<input
type="checkbox"
[checked]="subtask.completed"
(change)="toggleSubtask(subtask)"
/>
<span [class.completed]="subtask.completed">{{ subtask.text }}</span>
<button (click)="deleteSubtask(note, subtask.id)">❌</button>

<!-- Nested Subtask Input -->
<div>
<input type="text" placeholder="Add Subtask" #nestedSubtask />
<button (click)="addSubtask(subtask, nestedSubtask.value)">
+
</button>
</div>

<!-- Recursive Subtask List -->
<ul>
<ng-container *ngFor="let nested of subtask.subtasks">
<li>
<input
type="checkbox"
[checked]="nested.completed"
(change)="toggleSubtask(nested)"
/>
<span [class.completed]="nested.completed">{{
nested.text
}}</span>
<input type="text" placeholder="Add Subtask" #nestedD />
<button (click)="addSubtask(nested, nestedD.value)">+</button>
<button (click)="deleteSubtask(subtask, nested.id)">❌</button>
</li>
</ng-container>
</ul>
</li>
</ng-container>
</ul>

<button (click)="deleteNote(note.id)">Delete Note</button>
</div>
</div>


TS File

export class AppComponent {
notes: Note[] = [];

addNote(title: string, content: string) {
if (!title.trim() || !content.trim()) return;

this.notes.push({
id: Date.now(),
title,
content,
subtasks: [],
});
}

addSubtask(parent: { subtasks: Subtask[] }, text: string) {
console.log(parent.subtasks);
console.log(text);
if (!text.trim()) return;
console.log(text);
parent.subtasks.push({
id: Date.now(),
text,
completed: false,
subtasks: [], // Support nested subtasks
});
}

toggleSubtask(subtask: Subtask) {
subtask.completed = !subtask.completed;
}

deleteSubtask(parent: { subtasks: Subtask[] }, subtaskId: number) {
parent.subtasks = parent.subtasks.filter(
(subtask) => subtask.id !== subtaskId
);
}

deleteNote(id: number) {
this.notes = this.notes.filter((note) => note.id !== id);
}
}


Console



Continue reading...