Save tree form recursively and emit event on finish

I have a form with nested forms like that

Form 1
-- Form 1.1
-- Form 1.2

What I need is save Form 1, then save Form 1.1 and Form 1.2 using Id retrieved from saving Form 1 and after that emit that all children are saved.

I have to do this dynamically since the depth of this form is much bigger.

How is it better to perform this action?

I've tried to place a directive on children component's tags however I'm unable to read these components. These components are different and may be dynamic, so I cannot use @ViewChild on components.

I want to observe these child components for the sake of knowing how many events should be emmitted before telling parent component that everything is ready.

For now I can only think of a some service that would contain counts for every parent.

Update #1

Here is a StackBlitz and is a simplified version of what I have. In real app there is a dynamic component presence as well as dynamic parameter names (the ones I have to pass from parent to connect children) and nesting level of the form.

I've tried to cover workflow details with comments.

TL;DR I need to save all Persons, then save each Person's names using personId as an additional parameter to connect them in DB, after all form part are saved I need to report parent form that everything is ready.

from Save tree form recursively and emit event on finish