Angular Material에서 파일 선택 버튼

HTML

<input type="file" style="display: none" #fileInput accept="image/*" (change)="onChangeFileInput()" />
<button mat-raised-button color="primary" class="file-select-button" (click)="onClickFileInputButton()">
 <mat-icon>attach_file</mat-icon>
  ファイルを選択
</button>

<p class="file-name" *ngIf="!file; else fileName">ファイルが選択されていません</p>
<ng-template #fileName>
  <p class="file-name">{{ file?.name }}</p>
</ng-template>

TypeScript

import { Component, ViewChild } from '@angular/core';  // ViewChildをimport
// ... 中略 ...
export class FileInputComponent  {
  @ViewChild('fileInput')
  fileInput;

  file: File | null = null;

  onClickFileInputButton(): void {
    this.fileInput.nativeElement.click();
  }

  onChangeFileInput(): void {
    const files: { [key: string]: File } = this.fileInput.nativeElement.files;
    this.file = files[0];
  }
}

샘플