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

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

Groups: Registered

Joined: 7/1/2022
Posts: 1
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.

https://keyoti.com/downl...ellWeb-Angular-2022.zip

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.

Regards,
Vijay Kumar

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

Groups: Administrators, Registered

Joined: 8/13/2004
Posts: 2,646
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.

https://keyoti.com/downl...eb-Angular-2022.zip?v=2

Please let me know if I can help at all.
Jim

The changes, in index.html

Code:

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

      });
    </script>


and in HomeComponent

Code:

/*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!


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.