WHAT I AIM TO ACHIEVE:

I want to make a Single Page Application with three columns on one page. Each column is a component and should show data according to the URL (dynamic parameters). The relation between the data is hierarchical from left to right. So if the user clicks on an item of the left column, the data in the other columns has to change accordingly. The selection should be reflected in the ULR so a user can save a specific selection or send it to others. Here a quick Design to make this easier to understand:

PROBLEM

I struggle with structuring the app/template to make this work. In this StackBlitz I tried nesting the router-outlets, but I cannot style the cards properly. https://stackblitz.com/edit/angular-ivy-uh3636?file=src%2Fapp%2Flayout%2Fget-data.service.ts,src%2Fapp%2Flayout%2Flayout.component.css

The result looks like this when everything is selected:

"Children of selected thing" should be in the middle and "Detail of selected child" should be on the right. When nothing is selected yet, one can see the alternative text of the second column, but without styles of the card. The third column is invisible at all until and item of the second column is selected.

Also when I select a new item in the first column, the second column does not react to the changed URL parameter, but the third does.

As an alternative approach, I already tried to use named router-outlets on one layout component. Although the styling worked better with this approach, I faced other and more severe problems, e.g. navigation.

I would appreciate any help or tips on this.