I'll start off by showing what components I have -
main.component.html
<app-container>
<app-rectangle [color]="'blue'" [width]="200" [height]="200"></app-rectangle>
<app-circle [color]="'red'" [radius]="5"></app-circle>
<app-text [text]="'Hello world'"></app-text>
</app-container>
And then I have 4 other components -
container.component.html
<ng-content></ng-content>
Some other stuff, that is not relevant.
And then finally 3 directives, which render rectangle, circle and creates text svg elements.
I'm not adding component.ts files, but each one has specific logic, which again is not relevant, unless you think otherwise - then I can update the question.
So now let's move on to the issue -
Instead of rendering rectangle first, circle next and text the last, it does render everything at the same time, and basically the one that is rendered the fastest goes first, and the one that has the slowest rendering time, goes the last.
I'm using svg.js library to dynamically render elements in the components, and not using actual svg html elements, so that is the reason behind that.
Now actual question -
Is there any way to make ng-content render first, and move to the next one only after it has been rendered?
Also, if it is possible - is that a good idea, or should I change the actual element creation and think of a different way to create them?
Finally - is there any way from the actual component, e.g., app-rect to find out it's position within the ng-content? So in this case I would like to find out what position it is, which should return 3.
