Angular 2 contenteditable

Question

In Angular 2 how can I make two way data binding with a contenteditable div?

    
Text Field         


        
      

Answer 1

Angular 4/2 (Typescript) with dynamic editable:

// Imports
import { Component} from '@angular/core';

@Component({
    selector: 'discussion',
    template: `                                 
    

        
Wednesday 14 Nov, 2016 10.13PM
        
{{ discussion }}
    
    

        
            
        
        

            
Edit
            
Delete
        
    
`,
    styles: [`.editable {
        white-space: pre-wrap;
        border: 1px solid coral;
        width: 200px;
        min-height: 20px;
    }`]
})

export class DiscussionComponent {

    constructor(){}

    public discussion: string = "Test string";
    public editable: boolean = false;

    dDiscussion(){
        console.log("delete");
    }

    eDiscussion(event: any){
        // on click this will set 'contentEditable' to true 
        // and add 'editable' class for styling.
        this.editable = true;
    }

    uDiscussion(event: any){
        // on blur set 'contentEditable' to false 
        // and remove class 'editable' and log new values
        this.editable = false;
        console.log("this.discussion");
        console.log(this.discussion);
    }

}