Angular Angularでデバイス判定をngx-device-detectorで行う
概要Angularで、画面幅などで判定するのではなく、デバイス情報を取得して、スマホやタブレット、PC等のデバイス判定をすることができる、「ngx-device-detector」パッケージについて紹介します。パッケージのインストール以下の...
Angular
Angular Angular subscribeでネストが深くなるのと解決する方法[Angular・rxjs]
ネスト(入れ子)が深くなるAngularアプリの開発で、非同期処理を以下のように、連鎖して使うようなケースがあると、ネストが深くなることがあるかと思います。AのデータをAPIリクエストで取得Bのデータを、Aのデータを使ってAPIリクエストで...
Angular BreakpointObserverでレスポンシブデザインを実装する[Angular]
BreakpointObserver の概要BreakpointObserver は、npmパッケージの@angular/cdkに含まれている機能で、画面サイズの変化を検出してレスポンシブなデザインや挙動を実装したいときに使う便利なサービス...
Angular Angularでnavigateを使ってルートを切り替える
はじめにAngularプロジェクト内で使うルート制御をするには、Routerのnavigateメソッドを使って行えます。今回はこれを使って、コンポーネントでルート(URL)を切り替える実装を解説します。実装全体のルーティング設定全体のルーテ...
Angular AngularのRouteのパスの優先順位について
AngularのRouteのパスの優先順位は、Routeの設定を上から順に確認して、最初に一致したものが優先されます。その場合、後続のRouteの設定までは見ません。優先順位について検証間違った設定例えば、1番目にワイルドカードのパスを設定...
Angular AngularのRouteでリダイレクトする方法
AngularのルーティングによるリダイレクトについてAngularのルーティングでは、特定のURLを他のURLにリダイレクトすることができます。リダイレクトは、非推奨のURLや特定の条件に基づいてユーザーを適切なページに誘導する際に役立ち...
Angular Angularでスタンドアロンではないプロジェクトを作成する方法
Angular17以降から、デフォルトプロジェクトを作成するときに、スタンドアロン構成でプロジェクトが作成されるようになりました。ですが、古いバージョンのapp.modules.tsファイルでモジュールをインポートする方を使いたかったため、...
Angular リアクティブフォームで複数組み合わせのバリデーションをする[Angular]
はじめにリアクティブフォームのFormBuilderと、バリデーションを自作できるValidatorFnを使って、フォームの複数項目のデータを使ったバリデーションチェックを行います。実装方法実装内容2つの入力項目をバリデーション対象として、...
Angular リアクティブフォームで空白文字のバリデーションチェックをする[Angular]
はじめにリアクティブフォームのValidation機能で、カスタマイズできる機能を使って、フォームの入力値が空白文字だけの場合、エラーにするようにします。実装方法Angulalr 18で実装していきます。コンポーネントの作成空白文字チェック...
Angular Angularのリアクティブフォームで必須チェックを実装する方法
リアクティブフォームのバリデーション概要Angularはリアクティブフォーム用に組み込みのバリデーターを提供しており、その一つがValidators.requiredです。このバリデーターを使うことで、フォーム入力が必須であることを簡単に指...