title: Change Angular material overlay position dynamically after attaching
body: <p>Have a number of Overlays that need to re-position after <code>window-resize</code> event.</p>
  
  <p>The current initialy configured <code>PositionStrategy</code> <em>has logic that is dependent on outside variables</em> to align Overalys similar to CSS Grid / Flexbox behavior. </p>
  
  <p>This <a href="https://github.com/angular/material2/issues/1430#issuecomment-455034167" rel="nofollow noreferrer">material2 github issue</a> seems to indicate can only use <code>OverlayRef.dispose()</code> =>  <code>OverlayRef.create()</code>.</p>
  
  <p>Is there any solution that meets the following:</p>
  
  <ul>
  <li>Can update position with non static values.</li>
  <li>Does not destroy the component instance.</li>
  </ul>
  
  <p>Preferably able to be called from service and not <code>OverlayRef</code>'s component instance. </p>
  
  <p><strong>Edit 1 for clarity:</strong>
  Given the following <code>PositionStrategy</code>, <code>OverlayRef.updatePosition()</code> seems to not apply as need to re-calculate px.  <em>*Note</em> <code>window.innerWidth</code></p>
  
  <pre><code>      private setChannelPosition(): PositionStrategy {
          const chatWidth = 280;
          const chatSpace = 5;
          const distanceFromEdge = 80;
  
          const existingModalCount = this.channelModals.size;
          const numModalsCanFit = 
             Math.floor((window.innerWidth - 2 * distanceFromEdge) / (chatWidth + chatSpace));
          const distFromRight = 
             distanceFromEdge + ((existingModalCount % numModalsCanFit) * (chatWidth + chatSpace));
          return this.overlay.position().global().bottom('0px').right(`${distFromRight}px`);
        }
  </code></pre>
  
  <p><strong>Edit 2:</strong>
  The modals are transient..  So a solution with <code>flexibleConnectedTo()</code> doesn't seem to apply as any modal may or may not be closed by user in any order. </p>