I'm trying to create a specific layout for my webapp but can't get around it. Maybe you can help me !
I'm trying to design a configuration module that includes a few different views I'd like to horizontally "slide" between. The feeling of swipping screens is kind of important in this context. I'm struggling finding a good layout, and the logic behind the components lifecycle.
Here is a doodle of what I want. The main screen view has a flexbox layout that includes the current child component.
I suppose it's bad practice having a container large enough to fit all the components and just slide between them. The issue would be having too much components active at a single time for no real purpose.
I was thinking of a solution following this flow :
- Have Component 2 active
- Swipe to one side and capture the event
- Double the width of the dom and attach the new component to its respective side (Component 1 on the left, 3 on the right)
- Programatically scroll to display the new component
- Destroy the old component and resize the container width back to normal
I would usually replace a component by another with a help of a router-outlet, how could I manage to instanciate and render the components manually if I want to prepend/append them ?
With a ComponentFactoryResolver
How could I attach a component to the other in a hidden part of the dom (to the right or left of the main screen) if the parent container is a flexbox (which should resize its children to fit in), maybe I need another container layout ?
Do you have any tip or reference to help me solve my problem ?
If you have any idea, possibly some experience with this kind of layouts, I'd be glad to hear from you !
