title: Angular 4/5 material raised button with input file
body: <p>I am working on a angular application, currently to upload a file I am using this : </p>
  
  <pre><code>&lt;label class="btn btn-default"&gt;
      &lt;input type="file" (change)="selectFile($event)"&gt;
  &lt;/label&gt;
  &lt;button class="btn btn-success" [disabled]="!selectedFiles"
      (click)="upload()"&gt;Upload&lt;/button&gt;
  </code></pre>
  
  <p>with methods on my .ts file, it is working well.</p>
  
  <p>I want to upgrade this to material angular components raised button like that right now : </p>
  
  <pre><code>&lt;button mat-raised-button&gt;
      &lt;input type="file" (change)="selectFile($event)"&gt;
  &lt;/button&gt;
  
  &lt;button mat-button disabled [disabled]="!selectedFiles" (click)="upload()"&gt;Upload&lt;/button&gt;
  </code></pre>
  
  <p>the disabled button is doing well but the input file part doesnt work , it prints baddly and does not open a file folder search window. any ideas?</p>