How to use [(ngModel)] on div’s contenteditable in angular2?

NgModel expects the bound element to have a value property, which divs don’t have. That’s why you get the No value accessor error.

You can set up your own equivalent property and event databinding using the textContent property (instead of value) and the input event:

import { Component } from "angular2/core";

@Component({
    selector: "my-app",
    template: `{{ title }}
        <div contenteditable="true" [textContent]="model" (input)="model = $event.target.textContent"></div>
        <p>{{ model }}</p>`
})
export class AppComponent {
    title = "Angular 2 RC.4";
    model = "some text";
    constructor() {
        console.clear();
    }
}

Plunker

I don’t know if the input event is supported on all browsers for contenteditable. You could always bind to some keyboard event instead.

Leave a Comment