Problem

I want to bind a boolean to the contenteditable directive to a div which does not work.

Output:

Can't bind to 'contenteditable' since it isn't a known property of 'div'.

Tries

1. I tried to add [] brackets to bind a variable to it. editable is a ponent property type boolean

<div class="text-editor"
     [contenteditable]="editable"></div>

2. I also tried to add double curly brackets {{}} which leads to the same issue

<div class="text-editor"
     contenteditable="{{editable}}"></div>

It works in this cases

If I simply set the string true without any brackets then it works, but this solution does not solve my requirement since I want to change the behaviour dynamically

<div class="text-editor"
     contenteditable="true"></div>

I couldn't find any solution on questions at SO. I hope you know a solution and can share it with me. Thanks a lot.

Problem

I want to bind a boolean to the contenteditable directive to a div which does not work.

Output:

Can't bind to 'contenteditable' since it isn't a known property of 'div'.

Tries

1. I tried to add [] brackets to bind a variable to it. editable is a ponent property type boolean

<div class="text-editor"
     [contenteditable]="editable"></div>

2. I also tried to add double curly brackets {{}} which leads to the same issue

<div class="text-editor"
     contenteditable="{{editable}}"></div>

It works in this cases

If I simply set the string true without any brackets then it works, but this solution does not solve my requirement since I want to change the behaviour dynamically

<div class="text-editor"
     contenteditable="true"></div>

I couldn't find any solution on questions at SO. I hope you know a solution and can share it with me. Thanks a lot.

• javascript
• angular

Share Improve this question Follow asked Feb 12, 2020 at 8:03 Ling VuLing Vu 5,18155 gold badges2727 silver badges4949 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

Use either [attr.contenteditable]="editable"

or [contentEditable]="editable"

The "attr." prefix will emit an attribute for whatever suffix you use.

<div [attr.contenteditable]="editable">Edit me!</div>

OR

<div [contentEditable]="editable">Edit me!</div>

DEMO: https://stackblitz./edit/angular-xablzf