title: Angular 2 - change videos src after clicking on div
body: <p>I have problem with video src. After clicking on my div (camera) in source code I can see that video src is changing properly, but videos arent being played. What should I do? </p>
  
  <p>Below are my components - streaming.component.ts (responsible for displaying videos of chosen camera component) and camera.component.ts (for viewing icon with camera name)</p>
  
  <p><strong>streaming.component.ts</strong></p>
  
  <pre><code>import {Component} from '@angular/core';
  import {CameraComponent} from '../camera/camera.component';
  
  @Component({
     moduleId: module.id,
     selector: 'streaming',
     template: `
              &lt;camera cameraName="Kamera 1" (click)='cameraStream("sample.mp4")'&gt;&lt;/camera&gt;
              &lt;camera cameraName="Kamera 2" (click)='cameraStream("sample2.mp4")'&gt;&lt;/camera&gt;
              &lt;camera cameraName="Kamera 3" (click)='cameraStream("sample3.mp4")'&gt;&lt;/camera&gt;
              &lt;camera cameraName="Kamera 4" (click)='cameraStream("sample4.mp4")'&gt;&lt;/camera&gt;
              &lt;video width="800" controls&gt;
                  &lt;source src = "{{cameraSrc}}" type="video/mp4"&gt;
                  Your browser does not support HTML5 video.
              &lt;/video&gt;
              &lt;p&gt;{{cameraSrc}}&lt;/p&gt;
              `,
  directives: [CameraComponent]
  })
  export class StreamingComponent {
  
   cameraSrc:string;
   constructor() { }
  
   cameraStream(chosenCamera :string){
      this.cameraSrc=chosenCamera;
    }
   }
  </code></pre>
  
  <p>Videos are working ,because when I put </p>
  
  <pre><code>&lt;source src = "{{cameraSrc}}" type="video/mp4"&gt;
  </code></pre>
  
  <p>everything is fine.</p>
  
  <p><strong>camera.component.ts</strong></p>
  
  <pre><code>import { Component ,Input } from '@angular/core';
  
  @Component({
      moduleId: module.id,
      selector: 'camera',
      templateUrl: 'camera.component.html'
  })
  export class CameraComponent {
       @Input() cameraName:string = "";
  
       constructor() { }
  
   }
  </code></pre>
  
  <p><a href="http://i.stack.imgur.com/18fbl.jpg" rel="noreferrer">Here is what I get after clicking on camera2 for example</a>
  .</p>