Angular Saving an Edited Content

Question

I'm writing a code where a user can change a paragraph on the screen and save it. Currently, the user can change the paragraph and the save() operation works. But when saved, the changed paragraph doesn't go through the network. The paragraph doesn't change it saves the unedited version as if I haven't written anything. What should I change to achieve that?

HTML:

  <div class="content fuse-white ml-24 mr-8 h-100-p" fusePerfectScrollbar>
            <div class="label-list">
                <p>
                    A Paragraph: 
    
                    <span contenteditable="true">
                        {{_stickerData?.StickerData}}
                    </span>
                </p>
              
            </div>
        </div>

TS:

save(){
    this.confirmDialogRef = this._dialog.open(FuseConfirmDialogComponent, {
        disableClose: false,
    });
    
    this.confirmDialogRef.componentInstance.confirmMessage =
    "The paragraph will be changed";

this.confirmDialogRef.afterClosed().subscribe((result) => {
    if (result) {
        this._productionService
            .saveStickerData(this._stickerData)
            .subscribe((response: IStickerData) => {
                this._stickerData = response;
                this._messages.Show(            
                    "SUCCESS",
                    3
                );
            });
    }
});
}

Service TS:

saveStickerData(data: IStickerData): Observable<IStickerData> {
        return this._http.post("Production/SaveStickerData", data);
    }

Vitalii Y · Accepted Answer · 2021-04-26T11:40:57.527

[EDITED] When you interpolate your variable in the template and use contenteditable - it doesn't update your variable. You should update it manually.

<span contenteditable [textContent]="_stickerData?.StickerData" (input)="onStickerDataChange($event.target.innerHTML)">
</span>

and in TS should be something like this:

onStickerDataUpdate(data) {
    this._stickerData.StickerData = data;
}

Useful Links: 1, 2 [OLD RECOMMENDATIONS]

Are your sure that response has edited paragraph? If yes, Probably there is a problem with Change Detection. Import in component constructor ChangeDetectorRef and trigger markForCheck() method when getting data.
Nested subscriptions is a bad practice, try to refactor with switchMap()

This is a pseudocode to show the idea:

   class MyComponent {
      constructor(private cd: ChangeDetectorRef) {}
        
       save(){
         this.confirmDialogRef = 
         this._dialog.open(FuseConfirmDialogComponent, {
            disableClose: false,});
         this.confirmDialogRef.componentInstance.confirmMessage =
    "The paragraph will be changed";

         this.confirmDialogRef.afterClosed().pipe(switchMap(result) => {
           if (result) {
             return this._productionService.saveStickerData(this._stickerData);
           } else {
             return EMPTY;
           }
        }).subscribe((response) => {
          this._stickerData = response;
          this._messages.Show(            
             "SUCCESS",
             3
          );
          this.cd.markForCheck();
        });
      }
   }

Thank you, I added ChangeDetectorRef to my code but, it still doesn't save the edited text. — Rocket Monkey, Apr 26 '21 at 10:55
@RocketMonkey. have you checked that you are sending exactly edited data to your production service? And the service responded with edited data too, not the previous one? — Vitalii Y, Apr 26 '21 at 11:22
@RocketMonkey. It seems like contenteditable doesn't change your variable — Vitalii Y, Apr 26 '21 at 11:28
I did. Yes the data I send and the service's response is correct. But what should I do in order to make contenteditable work? — Rocket Monkey, Apr 26 '21 at 11:35
Thank you, you are amazing. Now it saves the edited text. I can't see the new text when I refresh the page tho. Should I add something to the HTML? — Rocket Monkey, Apr 26 '21 at 12:17

Angular Saving an Edited Content

1 Answers1