Title Back Colour Keyoti Title Line Title Curve
Blue Box Top

RapidSpell v6.2.1b not working with Angular - RapidSpell Web ASP.NET - Forum

Welcome Guest Search | Active Topics | Log In | Register

#1 Posted : Friday, July 1, 2022 3:46:55 PM
Rank: Newbie

Groups: Registered

Joined: 7/1/2022
Posts: 3
Hi Team,

Currently in our project (angular + .net api) we are using Rapid spell check and we notice after correcting the spelling using spellcheck the model is not getting updated. To test it out we download the referenced demo as mentioned in your KB article and faced same issue.

Downloaded the Angular demo code as mentioned in the KB article.


I have added the following lines to make two way binding in the home component

home.component.ts(add the following line)

public textareatext : string='';

home.component.html (add the two way binding and interplotation)

<textarea id="spellchecked' [(ngModel)]="textareatext"></textarea>
{{textareatext }}

After doing the spellcheck correction the value is not getting updated in the model. you will notice the string interpolation {{textarea}} is not updated after correcting the spelling.

Could you please check and lets us know a correct way to capture the change event.

Vijay Kumar

#2 Posted : Tuesday, July 5, 2022 5:30:00 AM
Rank: Advanced Member

Groups: Administrators, Registered

Joined: 8/13/2004
Posts: 2,667
Location: Canada
Thanks Vijay, that project has a deficiency in that the Angular model is not updated after the user makes a change – however this new version of the demo fixes that with a few extra lines of code.


Please let me know if I can help at all.

The changes, in index.html


    <script type="text/javascript">
      rapidSpellExtension.serviceProxy.commonFolderUrl = "https://localhost:7038/api";
      rapidSpell.addEventListener('ayt_correction', function (textbox, data) {
        window.angularComponentReference.zone.run(() => { window.angularComponentReference.updateTBModel(textbox.shadowTB); });


and in HomeComponent


/*Added for RapidSpell*/
  constructor(private ngZone: NgZone) {
  ngOnInit() {
    (window as any)['angularComponentReference'] = { component: this, zone: this.ngZone, updateTBModel: (tb: HTMLTextAreaElement) => this.updateTBModel(tb), };
  private updateTBModel(tb: HTMLTextAreaElement): void {
    this.textareatext = tb.value;


-your feedback is helpful to other users, thank you!

#3 Posted : Wednesday, August 24, 2022 4:41:49 PM
Rank: Newbie

Groups: Registered

Joined: 7/1/2022
Posts: 3
Thanks Jim for the solution this work considering that the form is going to have a single textarea. As in our application we have component where there are multiple textarea. I had extended your solution and use subject to emit the textarea itself and at the required textarea component, i have observer to listen to emitted value and filtered out the stream for the matching textarea id to and update the value
Forum Jump  
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.

About | Contact | Site Map | Privacy Policy

Copyright © 2002- Keyoti Inc.