How to toggle contenteditable element true or false in Angular 2

Question

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;
  }

}

Answer 1

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