~Linux、MySQLからAJAXまでAngular2のNgClass、NgStyle、クラスバインディング、スタイルバインディングを使ってcss設定NgClass、NgStyle、クラスバインディング、スタイルバインディングを使ってcss設定する方法をまとめました。※Angular2の2.0.0版、TypeScriptを使って確認したものです。(デモはv4.4.3、v2.0.0で動作確認)※目次をクリックすると目次の下部にコンテンツが表示されます。1.クラスバインディング2.スタイルバインディング3.NgClassディレクティブ4.NgStyleディレクティブ5.デモクラスバインディング・要素のclass属性からCSSクラス名を追加したり、除去したりできる。1)[class]=”expr”;コンポーネントで定義したCSSクラス名をバインドすることができる。bg-warning”;※”text-info”、”bg-warning”はBootstrap3で定義されているクラス。2)[class.class-name]=”expr”;“class-name”で指定したCSSクラスを”expr”の真偽の結果に応じて追加したり、削除したりできる。[class.bg-danger]=”chk1′′>“chk1′′という変数がtrueの場合は、”bg-danger”というBootstrap3で定義されているクラスを追加する。スタイルバインディング・インラインスタイルを設定できる。>Small</button>NgClassディレクティブ・指定した式を評価した結果に応じてCSSクラスを追加したり除去したりする。・式を評価した結果のタイプによって種類が分けられる。1文字列スペース区切りで指定されたすべてのCSSクラスが追加される。配列要素で指定されたすべてのCSSクラスが追加される。[‘text-info’,’bg-warning’]:[‘text-danger’,’bg-info’]”>住所:{{member.address}}</li>3オブジェクトキーがCSSクラス名を表し、値の真偽値に応じて追加・除去が行われる。!chk3}”>NgStyleディレクティブ・評価した式の結果に応じてスタイルを変更する。・ngStyleのプロパティに割り当てられた式は、オブジェクトとして評価されなければならず、該当する要素のスタイルは、このオブジェクトの変更に基づいて更新される。・更新されるスタイルの名前は、オブジェクトのキーから取得され、スタイルの値は、該当オブジェクトの値から取得される。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。