【Angular】画像のアップロードとPreview表示について

Angularでの開発を最近開始したのですが、ファイルアップロードのところでかなり詰まってしまったので、備忘録として残しておきます。

// 1/14追記あり

前提

・Twitterのようなアプリケーションを作成する
・その中に画像のアップロードとその画像の表示を行う

今回のゴール

・画像のアップロード
・アップロード画像の表示

詰まったとこ

・そもそも、アップロードどうやってやるのかわからない

まとめ

・Fileを扱う時にはFile Readerを用いる
・htmlのimgタグの中で表示させるためには、urlの形にする必要がある
・File Readerの中でurlを生成するためには、readAsDataUrlを用いる（これを用いることによって、readerのresultプロパティにurlの文字列が入る）

ソースコード

以下、新たなツイートをする部分のhtmlとtypescript

content-main.component.html

<div class="home-tweet-box tweet-box-component tweet-user">
    <input class="tweet-input" [(ngModel)]="newTweetContents" placeholder="いまどうしてる？">
    <button (click)="setTweetContents(newTweetContents)">ツイート</button>
    <input type='file' accept="image/*" (change)="onChangeInput($event)">
</div>
<img [src]=imageSrc alt="" />

content-main.component.ts

imageSrc = '';
reader = new FileReader();

onChangeInput(evt) {
 const file = evt.target.files[0];
 this.reader.onload = ((e) => {
   this.imageSrc = e.target['result'];
 });
 this.reader.readAsDataURL(file);
}

最終的に参考にしたURL

https://stackoverflow.com/questions/38476315/angular2-file-input-onchange/38476440
https://developer.mozilla.org/ja/docs/Web/API/FileReader
https://developer.mozilla.org/ja/docs/Web/API/FileReader/readAsDataURL

お願い

もし、他にベストプラクティス（普通こうやってやるでしょ）がありましたら知りたいです。

よろしくお願いいたします。

追記

この内容について、NgFormで書き換えることをしました。
https://qiita.com/TakahitoNakashima/items/d1d6fa314d1619f0ce45