Quill editor not firing for (blur) event in Angular

Question

I'm using Quill editor with the ngx-quill NPM package. Everything is working great except that I just can't get the (blur) event to fire.

Right now, I'm getting it to fire on every text change within the editor. Here's the controller

ngOnInit() {
  this.adminForm.controls['content'].valueChanges.subscribe(data => {
   console.log('Changed Values', data);
  });
}

And here's the HTML:

<quill-editor (change)="validateChange(field)" [formControlName]="field.id" [id]="field.id"></quill-editor>

But of course the (change) event stops firing the moment I move to a different input, and I can't find a way to access the (blur) event. What I really need is an observable that fires when the form field loses focus. I'm using an Angular 5 reactive (dynamic) form.

Thanks for any ideas!!

@Pankaj answered this questions perfectly [here](https://stackoverflow.com/questions/47290099/quill-editor-not-firing-change-event-in-angular/47290264?noredirect=1#comment81551808_47290264) and [here](https://stackoverflow.com/questions/34918198/how-to-use-onblur-event-on-angular2/34918214#34918214) — Matt, Nov 15 '17 at 14:50

score 2 · Answer 1 · answered May 31 '19 at 09:04

I use quill-editor for comments, and I want on focus to check if user isn't logged in I redirect him on login page, below you have quill-editor component with (onContentChanged)="onContentChanged($event)" event emitter that quill have.

<quill-editor
    theme="bubble"
    [placeholder]="quillConfig.placeholder"
    [modules]="quillConfig.moduleConfig"
    [(ngModel)]="quillData"
    (onContentChanged)="onContentChanged($event)"
    (onSelectionChanged)="onSelectionChanged($event)"
    (onEditorCreated)="getEditorInstance($event)">
</quill-editor>

Now I attached onContentChanged($event) function to (onSelectionChanged) quill eventEmitter, so quill component detecting some changes is calling

 onContentChanged(event: any) {
    if (!this.userAccount && event.oldRange === null && event.range !== null) {
      this.router.navigate(['/login']);
    }
  }

So you should have same function but checking this conditions

if (range === null && oldRange !== null) {
   //(blur event) occur and do something
}

If you have more question feel free to ask.

Quill editor not firing for (blur) event in Angular

1 Answers1