Angular TIPS

RouterModuleを使用して、Angularアプリにルーティング機能を実装し、ページ内に表示する内容を動的に切り替える方法を説明。

@Outputデコレーターを使って、子コンポーネントで行われる処理や情報をイベント経由で親コンポーネントへ引き渡す方法を解説。

@Inputデコレーターを使って、親コンポーネントから子コンポーネントに情報を引き渡すことで、マスター／詳細画面を作成する方法を解説。

ng-bootstrapを使って、CSSフレームワーク「Bootstrap」の機能を、Angularのコンポーネント／ディレクティブ構文で利用する方法を解説。

Metaサービスを使って、コンポーネントからページのメタ情報を操作する方法を説明する。

HttpClientサービスを使ってサーバーにファイルをアップロードするための基本的な方法を説明する。

HttpClientサービスを使ってWeb APIと非同期通信するための基本的な方法を説明する。

既存のコンポーネントからアプリ固有のロジックをサービスとして切り出すための基本的な方法を説明する。

JavaScriptのswitch文のように、ある式を評価して、その式の値に応じて、表示するメッセージを切り替える方法を説明する。

ngForディレクティブとsliceパイプを使って、ページャー（＝ページングのためのリンクリスト）を実装する方法を説明する。

i18nSelectパイプを使って、文字列値によってテキスト表示内容を切り替える方法を説明する。

@Componentデコレーターのhostパラメーターを使って、コンポーネント要素そのものに属性やイベントをバインドする方法を説明する。

Titleサービスを使って、コンポーネントからページタイトルを設定する方法を説明する。

選択肢の中から複数を選択する「チェックボックスのリスト」を設置するための基本的な方法を解説する。

選択肢の中から1つを選択する「ラジオボタンのリスト」を設置するための基本的な方法を解説する。

Angularにより拡張されている標準的な＜form＞／＜input＞要素を使って、入力の有無を判定したり、サブミット済みかを判定したりと、その状態を監視する方法を説明する。

Angularにより拡張されている標準的な＜form＞／＜input＞要素を使って、検証機能付きの入力フォームを実装する方法を説明する。

ngStyleディレクティブを使って、要素に対して複数のスタイルプロパティをまとめて設定する方法を説明する。

@Componentデコレーターのstylesパラメーターを利用してコンポーネントにスタイルシートを適用する基本的な方法を解説。また、スタイルを外部ファイルにする方法も説明する。

スタイルシートとして定義した複数の対象クラスのスタイルを、任意の要素のclass属性にまとめて着脱できるngClassディレクティブの基本的な使い方を説明する。

Angularで数値によってテキスト表示内容を切り替えるための、ngPluralディレクティブの基本的な使い方を説明する。

与えられた条件式に基づき要素の表示／非表示を切り替えるngIfディレクティブで用いる、「さもなければ」を意味するelse句と、テンプレートとして別出しするためのthen句の、基本的な使い方を説明する。

与えられた条件式に基づき要素の表示／非表示を切り替えるngIfディレクティブの基本的な使い方を説明。また、ngIfディレクティブによる表示／非表示の挙動の特性と注意点も示す。

配列の内容を順に出力できるngForディレクティブ（＝ngForOfディレクティブ）と、ダミーのコンテナー要素（＜ng-container＞）を使うことで、複数の要素群をまとめて繰り返し出力する方法を説明する。

配列の内容を順に出力できるngForディレクティブ（＝ngForOfディレクティブ）の基本的な使い方を説明。また、ngForディレクティブで利用できる特殊変数についてまとめる。

スタイルシートとして定義した対象クラスのスタイルを、任意の要素のclass属性に簡単に着脱できるClass Bindingの基本的な使い方を説明する。

セキュリティの観点からデフォルトではiframeのsrc属性やobjectのdata属性にはプロパティバインディングできない。これを回避して信頼できる値としてバインディングする方法を説明する。

Style Bindingの「[style.スタイルプロパティ名.単位] = "式"」というバインディング構文によって、要素に対する任意のCSSスタイルプロパティに単位付きで値をバインドする方法を説明する。

「[style.スタイルプロパティ名] = "式"」というバインディング構文により、要素に対する任意のCSSスタイルプロパティに値をバインドできるStyle Bindingの、基本的な使い方を説明する。

Angularで数値を通貨記号付きのテキスト表示に整形するための、currencyパイプの基本的な使い方を説明する。

Angularで数値を％（パーセント）形式のテキスト表示に整形するための、percentパイプの基本的な使い方を説明する。

Angularで数値によってテキスト表示内容を切り替えるための、i18nPluralパイプの基本的な使い方を説明する。

フォーム要素への入力値をイベントとして受け取る方法として、テンプレート参照変数を利用する方法を説明する。

要素にイベントハンドラーをバインドするEvent Bindingで、その引数で得られるイベントオブジェクト「$event」から、イベントに関する詳細情報を取得する方法を説明する。

テンプレート上のフォーム入力値とコンポーネントのプロパティ値を双方向にバインドするTwo-way Bindingのバインディング構文を説明し、その仕組みを紹介する。

要素にイベントハンドラーをバインドするEvent Bindingについて、2つのバインディング構文を説明する。

Angular CLIのng generateコマンドを使ってAngularアプリ用コードを自動生成してみる。また、各アプリのAngular CLI設定ファイルをエディターで編集する方法も紹介する。

新規Angularアプリの作成時にAngular CLIを使うと効率的だ。そのインストール方法と、コマンド1つでAngularアプリのスケルトンを作成して、そのアプリを起動する方法を説明する。

初めてのAngular開発【v4以降対応】。誤解のしようもない最も基本的な“Hello World”を作成して、Angularアプリの基本構造を理解しよう。

人気のJavaScriptフレームワーク「Angular」の基本機能を目的別リファレンスの形式でまとめる連載の第1回【v4以降対応】。まずはその特徴とインストール方法を説明する。

JavaScriptのString／Arrayクラスにおけるsliceメソッドと同じように、Angularで文字列から部分文字列を抽出したり配列から特定範囲の要素を取得したりできるsliceパイプの基本的な使い方を説明する。

Angularで数値を桁区切り文字列に整形するための、numberパイプの基本的な使い方を説明する。整数と小数点以下の桁数を指定して整形することも可能。

JavaScriptのStringクラスにおけるtoLowerCase／toUpperCaseメソッドと同じように、Angularで文字列を小文字／大文字に変換できるlowercase／uppercaseパイプの基本的な使い方を説明する。

JavaScriptのJSON.stringifyメソッドと同じように、AngularでJavaScriptのオブジェクトをJSON形式に変換できるjsonパイプの基本的な使い方を説明する。

HTML要素の属性に対応するプロパティではなく、属性そのものにバインディングする方法を説明する。

プロパティバインディングでHTMLタグを含む文字列にバインドした場合、デフォルトでサニタイズされる挙動を確認。逆に意図的にサニタイズさせない方法を説明する。

要素のプロパティに値をバインドするProperty Bindingについて、「[プロパティ名] = "式"」「bind-プロパティ名 = "式"」「{{プロパティ名}}」という3つのバインディング構文を説明する。

プロパティやメソッドを呼び出す際にレシーバーオブジェクトがnullでないことを確認した上で呼び出せる「?.」演算子の基本的な使い方を解説する。

JavaScriptのオブジェクトをHTMLテンプレートに結び付けるためのデータバインドを記述するためのInterpolation記法の基礎を解説する。

@ComponentデコレーターのtemplateパラメーターやtemplateUrlパラメーターを使って、コンポーネントにテンプレート（ビュー）を適用する方法を説明する。

初めてのAngular 2開発。誤解のしようもない最も基本的な“Hello World”を作成して、Angular 2アプリの基本構造を理解しよう。

人気のJavaScriptフレームワーク「Angular 2」の基本機能を目的別リファレンスの形式でまとめる連載スタート。まずはその特徴とインストール方法を説明する。