Angularのプロパティバインディング

Angularのプロパティバインディングを使用すると、HTML要素、Angularコンポーネントなどのプロパティの値を設定できます。

プロパティバインディングを使用して、プロパティや属性の値を動的に設定できます。ボタン機能の切り替え、画像パスのプログラムによる設定、コンポーネント間の値の共有などを行うことができます。

このアクティビティでは、テンプレートでプロパティバインディングを使用する方法を学びます。

要素の属性にバインドするには、属性名を角括弧で囲みます。例を以下に示します。

      
<img alt="photo" [src]="imageURL">
    

この例では、src属性の値はクラスプロパティimageURLにバインドされます。imageURLが持つ値は、imgタグのsrc属性として設定されます。

1. isEditableというプロパティを追加する

   app.component.tsのコードを更新し、AppComponentクラスにisEditableというプロパティを追加します。初期値はtrueに設定します。

         
   export class AppComponent {    isEditable = true;}
       

2. contentEditableにバインドする

   次に、divのcontentEditable属性をisEditableプロパティにバインドします。 []構文を使用します。

         
   @Component({    ...    template: `<div [contentEditable]="isEditable"></div>`,})
       

これで、divは編集可能になりました。素晴らしいですね👍

プロパティバインディングは、Angularの強力な機能の1つです。詳細については、Angularドキュメントをご覧ください。