Angularでデバイス判定をngx-device-detectorで行う

概要

Angularで、画面幅などで判定するのではなく、
デバイス情報を取得して、スマホやタブレット、PC等のデバイス判定をすることができる、「ngx-device-detector」パッケージについて紹介します。

パッケージのインストール

以下のコマンドでパッケージをインストールできます。

Angularのバージョンと合わせる必要があるため、詳しくはngx-device-detectorの公式ドキュメントを参考にしてください。

npm i ngx-device-detector

判定方法の実装例

以下のように、サービスを注入してするだけで、
サービスの判定をするメソッドを実行して、判定結果のboolean値を取得することができます。

この判定結果を使うことで、デバイス固有のカスタマイズをすることができます。

...
import { DeviceDetectorService } from 'ngx-device-detector';
...

  constructor(private deviceService: DeviceDetectorService) {}

  ngOnInit() {
    this.isMobile = this.deviceService.isMobile();
    this.isTablet = this.deviceService.isTablet();
    this.isDesktopDevice = this.deviceService.isDesktop();
  }

まとめ

デバイス判定は自作する場合、デバイス毎のテストを確認したりする必要が発生したりして、コストがかかったり、精度が落ちるのではないかと思います。
そのため、こちらのような有名なパッケージを利用した方が、コストや精度を考えるとより良いのではないかと思います。