Angular2でのカスタムデータ属性の設定方法

Angular2でのカスタムデータ属性の設定方法

Angular2でのカスタムデータ属性の設定方法を紹介します。

普通に書いたらエラー

データ属性にローカル変数や式を渡すような書き方をしたい。
例えばこんな感じ。

<div data-type="{{ data.type }}">item</div>

でもこれだとエラーになるんですね。

そうじゃなくて、こう

ディレクティブとして渡してあげましょう。

<div [attr.data-type]="data.type">item</div>

もしくは、

<div attr.data-type="{{ data.type }}">item</div>

です。

五十川 洋平(Yohei Isokawa)

五十川 洋平(Yohei Isokawa)

フロントエンドエンジニア/面白法人カヤックなどのWeb制作会社に勤務したのち、故郷の新潟に戻り独立。JSフレームワークAngularやFirebase、Google Cloud Platformを使ったWebアプリ開発が得意。Udemyでプログラミング解説の講師や、ドローンを使った映像制作も行っています。

プロフィール