Angular ng-container ディレクティブ
ng-container ディレクティブは、ホストエレメントを生成せずに、論理的なグルーピングを行うことのできる機能です。
Angular
全 32 件の記事
※本ページには広告・PR が含まれます。
npx を利用して特定バージョンの Angular プロジェクトを作成する
普段 Angular プロジェクトを作成する時には ng new を使うと思います。これにより、開発環境にグローバルインストールされている Angular CLI のバージョンに準拠したバージョンのプロジェクトが作成され…
外部モジュールのコンポーネントを利用する
Angular で AppModule 以外のモジュールに配置されているコンポーネントを AppModule に引き込んで利用したい局面はよくあります。
switchMap オペレーターを使って、ボタンクリックに応じて Observable データを取得する
Angular でボタンクリックなど、任意のユーザー操作のタイミングで Observable にデータを取得し、UI に最新情報を表示したいことがあります。
Angular コードスニペット
Angular のコードスニペットを挿入することができます。コードスニペットは "a-" を入力するとリスト表示されます。
Angular @Output デコレーター
Angular の @Output デコレーターは、子コンポーネントから親コンポーネントへイベント通知を行う際に利用します。
モジュール内のコンポーネントを外部モジュールで利用する方法
Angular では、モジュールごとに機能をまとめて管理することがよくあります。モジュール内のコンポーネントを外部のモジュールで利用する際には、コンポーネントをモジュールの exports に登録しておく必要があります。
Angular CLI のアップデート方法（アンインストール・インストール方法）
Angular CLI をアップデートする方法をご紹介します。まずは Angular CLI をアンインストールします。
Angular アプリケーションを Angular7 から Angular8 へバージョンアップ
Angular7 で作成したアプリケーションを Angular8 にバージョンアップしてみました。Angular の公式ドキュメンテーションに記載されているアップデートコマンドを実行しました。
Angular サービスを利用する目的とは
Angular では、サービスを使うことで、コンポーネントからアプリケーションの状態（ステート）や、ビジネスロジックを切り離すことができます。
Angular CLI: Angular 7 から Angular 8 へバージョンアップする方法
まず、次のコマンドで既存の Angular CLI をアンインストールします。続いて、キャッシュをクリア(クリーン)します。
Angular in-memory-web-api を使う
Angular が提供している in memory web api の使い方を紹介します。アプリケーションを開発する際に…
IE11 で Angular プロジェクトを実行するための polyfills
よく調べるので備忘録として残しておきます。
Angular Firebase による Google アカウント認証（ログイン・ログアウト）の実装方法
Angular アプリケーションで、Firebase にログイン・ログアウトの実装方法を紹介します。予め、Firebase が使えるようになっていることが前提になります。
Angular モジュールの lazy loading (遅延読み込み)
Angular ではルーティング時に呼び出すモジュールを、アプリケーション起動時ではなく、初回ルーティング時に読み込む仕組み(lazy loading, 遅延読み込み)が提供されています。
Angular 開発環境の構築
Angular での開発を始めるにあたり、次の４つをインストールする必要があります。Node.js は次のサイトからダウンロードします。
Angular - Visual Studio Code でのデバッグ実行
Angular アプリケーションを Visual Studio Code 上でデバッグ実行する方法です。Debugger for Chrome というエクステンションというがありますので、インストールします。
Angular Reactive Forms(リアクティブフォーム)の使い方
Angular で提供されている Reactive Forms（リアクティブフォーム）の使い方を見てみましょう。Reactive Forms を利用するため…
Angular HttpClient を利用した HTTP 通信
Angular で HTTP 通信を行う際には、HttpClient を利用します。@angular/common/http にある HttpClientModule をインポートします。
Angular ngFor ディレクティブによる繰り返し処理
Angular の ngFor ディレクティブを利用することで、HTML テンプレート上で繰り返し処理を行うことができます。
Angular CLI コマンドいろいろ
Angular CLI では、便利なコマンドが多く用意されています。その中でもよく使われるコマンドを掲載します。いろいろと省略すると、次のように書くことができます。
Angular CLI ルーティング用ファイル付きのモジュールの作成
Angualr CLI でモジュールを作成する際に利用するコマンドは ng generate module です。更に --routing というパラメーターを加えることで、ルーティング用ファイルを自動生成してくれます。
Angular CLI によるアプリケーションの作成とアプリケーションの実行(Hello World の表示)
Angular では CLI(Command Line Interface) が用意されており、CLI コマンドを利用することで素早くアプリケーションの作成やアプリケーションの実行などを行うことができます。
Angular ngOnChanges イベント
Angular のイベントライフサイクルフックのうち、ngOnChanges イベントについて見ていきます。ngOnChanges イベントは…
Angular async パイプで HTML テンプレートに独自クラスのオブジェクトを表示
タイトルのままです。Angular で取り扱う独自クラスのオブジェクトのデータを、async パイプを使って HTML テンプレート上に表示する方法です。
Angular イベントバインディング
Angular のイベントバインディングを利用して、HTML テンプレート上にあるコントロールのイベントを、コンポーネント(TypeScript) 側でハンドルする方法です。
Angular @Input デコレーター
Angular の @Input デコレーターは、親コンポーネントから子コンポーネントに対してデータを渡す際に使います。
Angular @ViewChild デコレーター
Angular では、HTML テンプレート上に定義されているコンポーネントを TypeScript 側から参照する機能として、@ViewChild デコレーターが提供されています。
Netlify で Angular のルーティング利用時に必要な設定
Netlify に Angular のアプリケーションを配備しただけでは、Angular のルーティングが動作せずに 404 NotFound エラーが出ます。
Angular アプリケーションの PWA 化
Angular アプリケーションを PWA にする方法です。至って簡単で、次のコマンドを実行すると PWA になります。
Angular ngModel ディレクティブの使い方(サンプルあり)
Angular の ngModel の使い方をメモしておきます。Angular v13 でのサンプルもダウンロード用に用意しました。
Angular - ngIf ディレクティブ
Angular の ngIf ディレクティブの利用例です。TypeScript の flag 変数の値に応じて表示します。