この記事で解決できる悩み
いずみこんな悩みを解決できる記事を書きました！
僕は現役フリーランスエンジニア（歴10年）で、資格は13個保有しています。
「AngularのHostListenerで画面サイズを監視する方法を知りたい」とお考えではありませんか？
HostListenerを使えばブラウザの画面サイズを監視できます。
取得した画面サイズをもとにスタイルを動的に変更できるので便利ですよ。
いずみ意外と簡単なのでサクッと解説します。
本記事を読めば、AngularのHostListenerで画面サイズを監視する方法について分かるので早速見ていきましょう！
いずみすぐ読み終わるので、ぜひ最後まで読んでくださいませ。
目次
【Angular】HostListenerで画面サイズを監視する方法
早速ですが、AngularのHostListenerで画面サイズを監視する方法を解説します。
height: number;
@HostListener('window:resize')
onResize() {
this.height = window.innerHeight * 0.8; // 画面サイズの80%
}上記のようにすれば、ブラウザの画面サイズを常時監視して値を取得できます。
いずみHostListenerは結構便利なので覚えておきましょう。
よくある質問
HostListenerはイベントが発生しすぎないですか？
イベントの発生しすぎが気になる場合はdebounceTimeを使いましょう。
まとめ
今回は、AngularのHostListenerで画面サイズを監視する方法について解説しました。
以下が本記事のまとめになります。
- おすすめ本
Angularの勉強なら「Angularアプリケーションプログラミング
」が分かりやすくておすすめですよ♪
いずみ最後までお読みいただき、ありがとうございました！
- クソおすすめ本
いずみ海外のエンジニアがどういった思考で働いているかが理解できます。
海外に行く気はないけど海外エンジニアの動向が気になる雑魚エンジニアにおすすめです（本当におすすめな本しか紹介しないのでご安心を）。
