Title Back Colour Keyoti Title Line Title Curve
Blue Box Top
 >   >  Support Forum

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

Welcome Guest Search | Active Topics | Log In | Register

Options
Previous Topic · Next Topic
Vijay
#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.

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
Back to top
  |
Jim
#2 Posted : Tuesday, July 5, 2022 5:30:00 AM
Rank: Advanced Member

Groups: Administrators, Registered

Joined: 8/13/2004
Posts: 2,669
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!
Back to top
WWW   |
Vijay
#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
Back to top
  |
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.

Powered by YAF | YAF © 2003-2009, Yet Another Forum.NET


About | Contact | Site Map | Privacy Policy

Copyright © 2002- Keyoti Inc.