Angular 4 TypeScript, click to open file open dialog

Question

Want to open the standard file open dialog by clicking the follow button in the .component.html file:

<button md-fab md-tooltip="Input">
    <md-icon class="md-24">input</md-icon>
</button>

It seems that a common way to open a dialog is to use an input tag as follows:

<input type="file">

but it shows additional things on the screen. Thinking of appearing in .component.ts with (click) in:

<button md-fab md-tooltip="Input" (click)="onClick()">
    <md-icon class="md-24">input</md-icon>
</button

but could not find a way to open the file open dialog in .ts, please help.

@ angular / cli: 1.0.1 node: 7,7,4 os: win32 x64 @ angular / xxxx: 4.0.3

Answer 1

, angular. ? https://material.angular.io/components/component/dialog. . html:

<button md-button (click)="openDialog()">Launch dialog</button>

.ts:

import {Component} from '@angular/core';
import {MdDialog, MdDialogRef} from '@angular/material';


@Component({
  selector: 'dialog-result-example',
  templateUrl: './dialog-result-example.html',
})
export class DialogResultExample {
  selectedOption: string;

  constructor(public dialog: MdDialog) {}

  openDialog() {
    let dialogRef = this.dialog.open(DialogResultExampleDialog);
    dialogRef.afterClosed().subscribe(result => {
      this.selectedOption = result;
    });
  }
}


@Component({
  selector: 'dialog-result-example-dialog',
  templateUrl: './dialog-result-example-dialog.html',
})
export class DialogResultExampleDialog {
  constructor(public dialogRef: MdDialogRef<DialogResultExampleDialog>) {}
}