How to toggle contenteditable true or false element in Angular 2

Question

switch the content attribute to true with the click of a button to edit the text of the element and, when blurred, switch the content attribute to false when editing!

how to set contenteditable to false!

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 must use binding properties with a prefix attr.before contenteditable, and then pass the variable there contenteditable. This will help you perform the effect of switching on contenteditableusing the method toggleContenteditable.

<h2 #el [attr.contenteditable]="contenteditable" (blur)="text=el.textContent">

Also change the function toggleContenteditablebelow.

toggleContenteditable(){
    this.contenteditable = !this.contenteditable; //`this.` was missing in later assignment
}

Plunger Demo