title: Image preview before upload in angular 5
body: <p>I have this code to show the image preview before uploading it. However I am working with Angular 5 so I have a <code>.ts</code> file instead of a <code>.js</code> one. How can I do the same in Angular 5? I also want to show the image in all browsers.</p>
  <p>My HTML:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;input type='file' onchange=&quot;readURL(this);&quot;/&gt;
  &lt;img id=&quot;blah&quot; src=&quot;http://placehold.it/180&quot; alt=&quot;your image&quot;/&gt;
  </code></pre>
  <p>My CSS:</p>
  <pre class="lang-css prettyprint-override"><code>img {
      max-width:180px;
  }
  
  input[type=file] {
      padding: 10px;
      background: #2d2d2d;
  }
  </code></pre>
  <p>My JavaScript:</p>
  <pre class="lang-js prettyprint-override"><code>function readURL(input) {
      if (input.files &amp;&amp; input.files[0]) {
          var reader = new FileReader();
          reader.onload = function (e) {
              document.getElementById('blah').src=e.target.result
          };
          reader.readAsDataURL(input.files[0]);
      }
  }
  </code></pre>