Angular 2 dynamically change contenteditable

Question

I understand that I can create directives to manipulate attributes. I was wondering if the concept is the same for manipulating the true/false value for contenteditable? or is there a better way? Basically I have comments section that puts comments into a table and I want to be able to edit each comment via a button to activate contenteditable to equal true. I attempted calling a function right out of contenteditable like so contenteditable="Edited()" but passing a function doesnt seem to be supported.

Edit

I have also attempted to just call contendeditable as a directive like so...

import { Directive, ElementRef, Input } from '@angular/core';
@Directive({ selector: '[myEdit]' })
export class EditDirective {
    constructor(el: ElementRef) {
       el.nativeElement.contenteditable = 'true';
    }
}

then call the directive on the html <td myedit>but had no luck. To verify that my directive was called correctly I changed it to change the color of the text and it worked so I am leaning toward this is not the correct way to manipulate the contenteditable attribute.

Also here is plunkr to my attempt https://plnkr.co/edit/029WpB11IqkvYlQieT6h?p=preview

Answer 1

The contentEditable property is a case-sensitive

Plunker Example

See also

• http://www.w3schools.com/jsref/prop_html_contenteditable.asp