title: Angular2 mouseover or mouseleave causes app's bindings to refresh
body: <p>So I am using angular2 RC4, when I bind these events, all elements bindings on the page is refreshed, This is annoying b/c I have video content that restarts from the beginning. I didnt see this issue anywhere else, so I could be doing something wrong.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//FrontPage
  import template from './FrontPage.html';
  
  @Component({
    selector: 'front-page',
    template,
    directives: [VideosDisplay_New, VideosDisplay_Watch, VideosDisplay_Complete, NavBar, StickyPos, SideBarRight, Carousel, ModalDirective]
  })
  export class FrontPage {
    
      public clButton : CLButton;
      
      @ViewChild('episodeModal') episodeModal: ModalDirective;
      public clickedEpisodeModal : OuNeRe;
      @ViewChild('seriesModal') seriesModal: ModalDirective;
      public clickedSeriesModal : ThCoMe_OuSe;
      
      constructor (){
         
          this.clButton = CLButton;      
      }
  
      public navBool : boolean = false;
      public sidebarTop : number = 55;
      public navStyle : string = 'relative';
      
      
      public navExpand() : void{
          this.sidebarTop = 55;
          this.navBool = false;
          this.navStyle = 'relative';
      };
  
      public navCollapse() : void {
          this.sidebarTop = 10;
          this.navBool = true;       
          this.navStyle = 'absolute';
      };
  }
  
  //Carousel
  import template from './Carousel.html';
  
  @Component({
    selector: 'carousel',
    template,
    directives: [CollapseDirective, TOOLTIP_DIRECTIVES, CElement, CElementVideos]
  })
  export class Carousel implements OnInit{
      
      private currentIndex = 0;
      private skip : number = 0;
      private ouFe : OuFe;
      private results : StdSequence ;
      public ces : any[] = [];
      
      public constructor (ouFe : OuFe) {
          this.ouFe = ouFe;
      }
      
      ngOnInit () {
          
          this.results = this.query(0);   
          
          this.results.observeChanges({
              addedBefore :function(id, fields, before){
                  this.results = this.ouFe.fFind({},{limit:6});
              }.bind(this)    
          });
      }
        
      query (skip : number) : StdSequence {
          return this.ouFe.fFind({},{'skip':skip, limit:6});    
      }
  }
  
  //CElementVideos
  import template from './CElementVideos.html';
  
  @Component({
    selector: 'celement-videos',
    template,
    directives: [CollapseDirective, TOOLTIP_DIRECTIVES]
  })
  
  export class CElementVideos {
      
      @Input() src : string = "";
      @Input() caption : string = "NA";
      
      public constructor (){
      }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- front page html view --&gt;
  
  &lt;div class="container-fluid"&gt;
   &lt;div class="row fixed-nav" 
     (mouseover)="navExpand();" 
    (mouseleave)="navCollapse();"
    [ngStyle]="{'position': navStyle}"&gt;
    &lt;nav-bar  class="col-md-12"&gt;&lt;/nav-bar&gt;
   &lt;/div&gt;
      &lt;!-- video content --&gt;
     &lt;div class="row content-bottom-space"&gt;
    &lt;carousel&gt;&lt;/carousel&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;!-- video container view, Carousel.html --&gt;
  &lt;div class="container-fluid"&gt;
   &lt;div class="row absolute-parent"&gt; 
    &lt;div *ngFor="let ce of results; let i = index"&gt;
     &lt;celement-videos *ngIf="ce.fDocumentTypes()[1] == 'Videos'" [src]="ce.fGetVideo(0)" [caption]="ce.fTitle()" class="col-sm-2"&gt;&lt;/celement-videos&gt;
    &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;!-- video component view, CElementVideos.html--&gt;
  &lt;div&gt;
   &lt;video [autoplay]="true" [muted]="true" controls&gt;
    &lt;source [src]="src" type="video/webm"&gt;
    &lt;source [src]="src" type="video/mp4"&gt;
    &lt;source [src]="src" type="video/ogg"&gt;
    Your browser does not support the video tag.
   &lt;/video&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>So what is up with the mouse events?</p>