Ngx-quill: onContentChange() Debounce option

Created on 7 Apr 2017  Â·  6Comments  Â·  Source: KillerCodeMonkey/ngx-quill

Would be nice to set a x number of seconds to debounce the onContentChange function.

So when you want to save data to your back end, you can write it every x seconds.

Most helpful comment

you could use formControls or observables at all:

like described here:
https://blog.thoughtram.io/angular/2016/01/06/taking-advantage-of-observables-in-angular2.html

I added an example of usage formConrols/Observables with debounce and distinctUntilChanged.
Observables are mighty tools.

Even the angular eventemitter is based on it.

Check out https://github.com/KillerCodeMonkey/ngx-quill-example/blob/master/src/app.component.ts

or as live example: https://killercodemonkey.github.io/ngx-quill-example/
the reactive forms example --> open dev tools and js console to see the output.

bildschirmfoto 2017-04-07 um 14 27 03

So you would not use the onContentChange hook --> but the native angular form api.

All 6 comments

you could use formControls or observables at all:

like described here:
https://blog.thoughtram.io/angular/2016/01/06/taking-advantage-of-observables-in-angular2.html

I added an example of usage formConrols/Observables with debounce and distinctUntilChanged.
Observables are mighty tools.

Even the angular eventemitter is based on it.

Check out https://github.com/KillerCodeMonkey/ngx-quill-example/blob/master/src/app.component.ts

or as live example: https://killercodemonkey.github.io/ngx-quill-example/
the reactive forms example --> open dev tools and js console to see the output.

bildschirmfoto 2017-04-07 um 14 27 03

So you would not use the onContentChange hook --> but the native angular form api.

Or you can simple get some ideas of this post:
http://www.talkinghightech.com/en/angular-2-creating-search-field-debounce-time/
the angular 2 part --> hang on the onContentChanged Event and create your own Subject --> and subcribe to it, so you can use all observable functions like debounceTime ;).

So you could pass additional info like the quill instance to it.

And me again, there is another easy way --> use the ViewChild decorator to access the quill editor component in your dom. After that you can subscribe directly to the onContentChanged event and use the native debounce stuff before.

i added this also to the example described above

view child + directly subscription Object {editor: Quill, html: "<div>test asdf</div>", text: "test asdf↵", delta: Delta, oldDelta: Delta…}

should be in your js console if you change the reactive form editor (this approach will also work without reactive forms or anything ;))

And the advantage is, that you have access to all event data like the editor instance if you are working with multiple instances and so on.

This should solve your problem.

close this issue if everything is clear.

@frankspin89 any updates?

@KillerCodeMonkey Thanks so much for your fast and comprehensive answer.
Try to get back to you today, little busy on work today.

Keeping this issue open for now.

and again... any news?

Was this page helpful?
0 / 5 - 0 ratings