Angular2でのstyle属性とクラス属性の指定

スポンサーリンク

Angular2かなり楽しいけど、わからないと複雑に考えがち。
今回はstyle属性とクラス名の指定方法を紹介します。

style属性の指定

<div class="box" [style.background-color]="'red'"></div>
<div class="box" [style.background-color]="isActive ? 'green' : 'grey'"></div>
<div class="box" [style.background-color]="getColor()"></div>

[style.property]の形式で指定。
テンプレートが属するコンポーネントのプロパティやメソッドの返り値をConditionsとして指定できる。
真偽値falseの場合は、除去される。

クラス属性の指定

<div [class]="box"></div>
<div [class.box]="true"></div>
<div [class.is-active]="isOpen"></div>

こちらも、テンプレートが属するコンポーネントのプロパティやメソッドの返り値をConditionsとして指定できる。
真偽値falseの場合は、除去される。

ngStyle

<div [ngStyle]="{ 'display': 'block', 'color': 'red', 'font-weight': 'bold' }"></div>

オブジェクト形式で指定。
カンマで区切れば複数指定もできる。

ngClass

<div [ngClass]="[ 'box', 'is-active' ]"></div>
<div [ngClass]="{ 'box': true, 'is-active': isActive }"></div>

配列、オブジェクト形式で指定。
配列の場合、全ての文字列がクラス名として追加される。
オブジェクトではConditionsとして指定できる。もちろん、falseの場合は除去される。

Attribute Directives

Attribute Directivesという仕組みで属性のディレクティブを作成する。
公式サイトのDocsに詳しく載っている。

この例では [styled] というディレクティブを作成する。

<div styled></div>

ElementRef というクラスを介してDOMにアクセスして、属性値を書き換える。
ElementRef.nativeElement プロパティでDOMを参照する。

import {Directive, ElementRef, Renderer} from 'angular2/core';

@Directive({
  selector: '[styled]',
})
export class StyledDirective {
  constructor(public el: ElementRef, public renderer: Renderer) {
    // el.nativeElement.style.backgroundColor = 'yellow';
    renderer.setElementStyle(el.nativeElement, 'backgroundColor', 'yellow');
  }
}
スポンサーリンク