title: Angular 6 Scroll Listener Reloads Component
body: <p>To lay this out as simply as possible, here's my scenario.</p>
  
  <p>1) I have parent component that has a <code>ViewContainerRef</code> to dynamically load in a component within the parent. For my use case, the parents is an empty holder page that replaces itself dynamically with another page dependent on a set of variables.</p>
  
  <p><code>&lt;ng-template #dynamic&gt;&lt;/ng-template&gt;</code></p>
  
  <p>2) The child component has a horizontal scroll div that looks similar to the following:</p>
  
  <p><code>&lt;div id="carousel" (scroll)="onScroll($event)"&gt;
      &lt;!-- List of components --&gt;
  &lt;/div&gt;</code></p>
  
  <p>Any time it is scrolled WITH the <code>(scroll)</code> listener, it reloads the parent component and therefore the scroll position always bounces back to 0 because it was reloaded.</p>
  
  <p>However, if I remove the <code>(scroll)</code> listener the div scrolls without an issue. The problem is, I want to dynamically change items on the page based on the horizontal scroll position.</p>
  
  <p>Does anyone have any thoughts on issues that could arise with embedded components and a scroll listener? Would be GREATLY appreciated!</p>