title: Browse file in AngularJS + TypeScript on button click
body: <p>I have <strong>user.component.html</strong> and <strong>user.component.ts</strong>
  All examples I found were in html this way <code>&lt;input type="file" /&gt;</code>
  I don't want to use this style. I have in my html file:</p>
  
  <pre><code>&lt;button type="button" class="btn" (click)="openPicture()" Browse &lt;/button&gt;
  </code></pre>
  
  <p>Below is the function on ts file:</p>
  
  <pre><code>  public openPicture() {
      //for testing
      console.log('button clicked to open picture');
  
      var picture = browse.the.picture.and.assing.to.this.variable;
  
      //another test, see on console if picture is read
      console.log('%c       ', 'font-size: 100px; background: {{picture}} no-repeat;');
      // Later display picture variable on html and save to database or do anything desired.
  }
  </code></pre>
  
  <p>I have found an <a href="https://stackoverflow.com/questions/43637202/angular-4-typescript-click-a-button-to-pop-file-open-dialog">example</a> on stackoverflow with <code>angular/material</code> but I dont have this module. Is there any other alternative way, without installing any extra package to solve this?</p>