CODEWITHSUNDEEP
angulardata-bindingcontenteditable
Chris Tarasovs
Chris Tarasovs

Reputation: 695

Angular 2: ContenteditableModel: 2-way data binding

I am able to emit an event from the contenteditableModel directive but I am not able to receive the data ' @Input('contenteditableModel') model: any;' i keep getting undefined.

contenteditableModelChange works fine, but not contenteditableModel

The way I update my data is by updating the this.elementRef.nativeElement.textContent as I was not able to figure out how to use [innerHTML]

This directive is based on this guy code: but rebuilt for angular 2.0.

export class pageContent{
    <p
 contenteditable="true"

(contenteditableModelChange)="runthis($event)"
[contenteditableModel]="text"


></p>

    public text:any = 'ddddd';
    constructor(){}
    runthis(ev){
        this.text  = ev
            console.log('updated done ev', ev)
            console.log('text now should be ', this.text)
    }

}

    import {Directive, ElementRef, Input, Output, EventEmitter, OnChanges} from "@angular/core";

    @Directive({
        selector: '[contenteditableModel]',
        host: {
            '(blur)': 'onEdit()',
            '(keyup)': 'onEdit()'
        }
    })

    export class ContentEditableDirective implements OnChanges {
        @Input('contenteditableModel') model: any;
        @Output('contenteditableModelChange') update = new EventEmitter();

        constructor(
            private elementRef: ElementRef
        ) {
            console.log('ContentEditableDirective.constructor');
        }

        ngOnChanges(changes) {
            console.log('ContentEditableDirective.ngOnChanges');
            console.log(changes);
            if (changes.model.isFirstChange())
                this.refreshView();
        }

        onEdit() {
            console.log('ContentEditableDirective.onEdit');
            var value = this.elementRef.nativeElement.innerText
            this.update.emit(value)
        }

        private refreshView() {
            console.log('ContentEditableDirective.refreshView');
            this.elementRef.nativeElement.textContent = this.model
        }
    }

By the way if anyone suggest to set up my own equivalent property and event databinding using the textContent property (instead of value) and the input event, I already tried it on this plunker and there is a issue that cursor on IE, Firefox and Safari gets set to 0

http://plnkr.co/edit/KCeKTPu8dJI0O1nVMPfb?p=preview

Upvotes: 6

Views: 711

Answers (1)

Vamshi
Vamshi

Reputation: 9331

I changed ngOnChanges to this :

ngOnChanges(changes) {
  console.log('ContentEditableDirective.ngOnChanges');
  console.log(changes);
  //if (changes.model.isFirstChange())
  this.refreshView();
}

Its working fine .

Plnkr: https://plnkr.co/edit/VW4IJvcv1xjtBKTglWXT?p=preview

According to docs: isFirstChange() tells us if we are assigning the value for the first time . According to your code, you want to update text only if its first time change. Which is wrong. My opinion we dont need to worry about it at all.

Upvotes: 2

Related Questions