Angular2 mouseover or mouseleave causes app's bindings to refresh
<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>