title: Angular horizontal swiping layout
body: <p>I'm trying to create a specific layout for my webapp but can't get around it. Maybe you can help me !</p>
  
  <p>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.</p>
  
  <p><a href="https://i.imgur.com/MzidFOx.png" rel="nofollow noreferrer">Here is a doodle of what I want</a>.
  The main screen view has a flexbox layout that includes the current child component.</p>
  
  <p>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.</p>
  
  <p>I was thinking of a solution following this flow : </p>
  
  <ul>
  <li>Have Component 2 active</li>
  <li>Swipe to one side and capture the event</li>
  <li>Double the width of the dom and attach the new component to its respective side (Component 1 on the left, 3 on the right)</li>
  <li>Programatically scroll to display the new component</li>
  <li>Destroy the old component and resize the container width back to normal</li>
  </ul>
  
  <p><em>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 ?</em><br>
  <strong>With a ComponentFactoryResolver</strong></p>
  
  <p>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 ?</p>
  
  <p>Do you have any tip or reference to help me solve my problem ?</p>
  
  <p>If you have any idea, possibly some experience with this kind of layouts, I'd be glad to hear from you !</p>