How to use [(ngModel)] on div's contenteditable in angular2?
NgModel
expects the bound element to have a value
property, which div
s 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}}`})export class AppComponent { title = 'Angular 2 RC.4'; model = 'some text'; constructor() { console.clear(); }}
I don't know if the input
event is supported on all browsers for contenteditable
. You could always bind to some keyboard event instead.
Updated answer (2017-10-09):
Now I have ng-contenteditable module. Its compatibility with Angular forms.
Old answer (2017-05-11):In my case, I can simple to do:
<div contenteditable="true" (input)="post.postTitle = $event.target.innerText" >{{ postTitle }}</div>
Where post
- it's object with property postTitle
.
First time, after ngOnInit()
and get post
from backend, I set this.postTitle = post.postTitle
in my component.
Working Plunkr here http://plnkr.co/edit/j9fDFc, but relevant code below.
Binding to and manually updating textContent
wasn't working for me, it doesn't handle line breaks (in Chrome, typing after a line break jumps cursor back to the beginning) but I was able to get it work using a contenteditable model directive from https://www.namekdev.net/2016/01/two-way-binding-to-contenteditable-element-in-angular-2/.
I tweaked it to handle multi-line plain text (with \n
s, not <br>
s) by using white-space: pre-wrap
, and updated it to use keyup
instead of blur
. Note that some solutions to this problem use the input
event which isn't supported on IE or Edge on contenteditable
elements yet.
Here's the code:
Directive:
import {Directive, ElementRef, Input, Output, EventEmitter, SimpleChanges} from 'angular2/core';@Directive({ selector: '[contenteditableModel]', host: { '(keyup)': 'onKeyup()' }})export class ContenteditableModel { @Input('contenteditableModel') model: string; @Output('contenteditableModelChange') update = new EventEmitter(); /** * By updating this property on keyup, and checking against it during * ngOnChanges, we can rule out change events fired by our own onKeyup. * Ideally we would not have to check against the whole string on every * change, could possibly store a flag during onKeyup and test against that * flag in ngOnChanges, but implementation details of Angular change detection * cycle might make this not work in some edge cases? */ private lastViewModel: string; constructor(private elRef: ElementRef) { } ngOnChanges(changes: SimpleChanges) { if (changes['model'] && changes['model'].currentValue !== this.lastViewModel) { this.lastViewModel = this.model; this.refreshView(); } } /** This should probably be debounced. */ onKeyup() { var value = this.elRef.nativeElement.innerText; this.lastViewModel = value; this.update.emit(value); } private refreshView() { this.elRef.nativeElement.innerText = this.model }}
Usage:
import {Component} from 'angular2/core'import {ContenteditableModel} from './contenteditable-model'@Component({ selector: 'my-app', providers: [], directives: [ContenteditableModel], styles: [ `div { white-space: pre-wrap; /* just for looks: */ border: 1px solid coral; width: 200px; min-height: 100px; margin-bottom: 20px; }` ], template: ` <b>contenteditable:</b> <div contenteditable="true" [(contenteditableModel)]="text"></div> <b>Output:</b> <div>{{text}}</div> <b>Input:</b><br> <button (click)="text='Success!'">Set model to "Success!"</button> `})export class App { text: string; constructor() { this.text = "This works\nwith multiple\n\nlines" }}
Only tested in Chrome and FF on Linux so far.