How to toggle contenteditable element true or false in Angular 2
angular, contenteditable
Solution
You should use property binding with `attr.` prefix before `contenteditable` and then pass `contenteditable` variable in there. This would help you to perform toggle effect on `contenteditable` via `toggleContenteditable` method.
<h2 #el [attr.contenteditable]="contenteditable" (blur)="text=el.textContent">
Also change `toggleContenteditable` function to below.
toggleContenteditable(){
this.contenteditable = !this.contenteditable; //`this.` was missing in later assignment
}
Plunker Demo
Problem
toggle contenteditable element to true with button call to edit element text and on blur toggle contenteditable element to false when done editing! how to set contenteditable to false in the class! ``` import {Component} from 'angular2/core' @Component({ selector: 'my-app', template: ` <h2 #el contenteditable="false" (blur)="text=el.textContent"> This Content is Editable </h2> <button (click)="toggleContenteditable()">Edit Text Content</button> <hr/> <p> Text Obj: {{text}}</p> ` }) export class App { text : string; contenteditable:bool = false; toggleContenteditable(){ this.contenteditable = !this.contenteditable; } } ```