Angular TIPS

本連載は、「Build Insider」内の連載「Angular Tips」を同サイトおよび筆者の了解を得たうえで、本フォーラムに移行したものです。なお、記事はBuild Insiderで公開した状態のまま移行しているため、用語統一などの基準が@ITの通常の記事とは異なる場合があります。

Angular TIPS:

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

[山田祥寛(http://www.wings.msn.to/), ] ()
Angular TIPS:

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

[山田祥寛(http://www.wings.msn.to/), ] ()
Angular TIPS:

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

[山田祥寛(http://www.wings.msn.to/), ] ()
Angular TIPS:

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

[山田祥寛(http://www.wings.msn.to/), ] ()
Angular TIPS:

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

[山田祥寛, ] ()
Angular TIPS:

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

[山田祥寛, ] ()
Angular TIPS:

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

[山田祥寛, ] ()
Angular TIPS:

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

[山田祥寛, ] ()
Angular TIPS:

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

[山田祥寛, ] ()
Angular TIPS:

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

[山田祥寛, ] ()
Angular TIPS:

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

[山田祥寛, ] ()
Angular TIPS:

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

[山田祥寛, ] ()
Angular TIPS:

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

[山田祥寛, ] ()
Angular TIPS:

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

[山田祥寛, ] ()
Angular TIPS:

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

[山田祥寛, ] ()
Angular TIPS:

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

[山田祥寛, ] ()
Angular TIPS:

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

[山田祥寛, ] ()
Angular TIPS:

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

[山田祥寛, ] ()
Angular TIPS:

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

[山田祥寛, ] ()
Angular TIPS:

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

[山田祥寛, ] ()
Angular TIPS:

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

[山田祥寛, ] ()
Angular TIPS:

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

[山田祥寛, ] ()
Angular TIPS:

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

[山田祥寛, ] ()
Angular TIPS:

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

[山田祥寛, ] ()
Angular TIPS:

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

[山田祥寛, ] ()
Angular TIPS:

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

[山田祥寛, ] ()
Angular TIPS:

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

[山田祥寛, ] ()
Angular TIPS:

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

[山田祥寛, ] ()
Angular TIPS:

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

[山田祥寛, ] ()
Angular TIPS:

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

[山田祥寛, ] ()
Angular TIPS:

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

[山田祥寛, ] ()
Angular TIPS:

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

[山田祥寛, ] ()
Angular TIPS:

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

[山田祥寛, ] ()
Angular TIPS:

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

[山田祥寛, ] ()
Angular TIPS:

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

[山田祥寛, ] ()
Angular TIPS:

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

[山田祥寛, ] ()
Angular TIPS:

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

[山田祥寛, ] ()
Angular TIPS:

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

[山田祥寛, ] ()
Angular TIPS:

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

[山田祥寛, ] ()
Angular TIPS:

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

[山田祥寛, ] ()
Angular TIPS:

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

[山田祥寛, ] ()
Angular TIPS:

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

[山田祥寛, ] ()
Angular TIPS:

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

[山田祥寛, ] ()
Angular TIPS:

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

[山田祥寛, ] ()
Angular TIPS:

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

[山田祥寛, ] ()
Angular TIPS:

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

[山田祥寛, ] ()
Angular TIPS:

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

[山田祥寛, ] ()
Angular TIPS:

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

[山田祥寛, ] ()
Angular TIPS:

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

[山田祥寛, ] ()
Angular TIPS:

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

[山田祥寛, ] ()
Angular TIPS:

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

[山田祥寛, ] ()
Angular TIPS:

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

[山田祥寛, ] ()
スポンサーからのお知らせPR

注目のテーマ

Microsoft & Windows最前線2025
AI for エンジニアリング
ローコード/ノーコード セントラル by @IT - ITエンジニアがビジネスの中心で活躍する組織へ
Cloud Native Central by @IT - スケーラブルな能力を組織に
あなたにおすすめの記事PR

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。