am working on an admin panel where the admin can update incorrect questions. The UI is almost complete, but I am facing an issue with preserving HTML tags when updating and submitting data to the database.
The problem is that I am binding the question and options using innerHtml because the response from the database contains HTML tags. When I try to update the content and submit it, the data is stored in the database as plain text, removing all HTML tags. The question may contain images, breaks, spaces, new lines, etc., and if these tags are removed, the alignment gets disturbed.
Here is my HTML component code:
<h2 mat-dialog-title>Update Question/Options</h2><mat-dialog-content class="mat-typography"><div class="formData"><div class="display-container"><div class="practicePaperSecondSection"><div class="container"><div class="row practiceExamScreen"><div class="practiceQuestionAndSolutionDiv"><div class="card"><div class="row"><div class="col-xl-12"><!-- QUESTION BODY --><div class="card-body question-content QuestionAndSolutionSection"><!-- Question Text & Image --><div class="text-black"><div class="mt-2"><label>Question:</label><div *ngIf="!isEditMode" [innerHtml]="editedQuestion" (click)="toggleEditMode()" class='displayText'></div><textarea *ngIf="isEditMode" class="form-control" [(ngModel)]="editedQuestion"></textarea></div></div><div class="m-3"><div class="option-container"><ul class="optionsList"><li class="cursor-pointer mb-2 text-black" *ngFor="let option of options; let i = index; trackBy: trackByIndex"><div class="d-flex"><div class="label"><div *ngIf="!isEditMode" [innerHtml]="option" (click)="toggleEditMode()" class='displayText'></div><textarea *ngIf="isEditMode" class="form-control ml-3" [(ngModel)]="options[i]"></textarea></div></div></li><p *ngIf="isEditMode" class="warning-message">Please update only the text content. Ensure to preserve the HTML tags and structure as they are necessary for proper formatting.</p></ul></div></div></div></div></div><mat-dialog-actions align="end"><button mat-button mat-dialog-close>Cancel</button><button mat-flat-button color="primary" class="m-3" (click)="submitButton()">Update</button></mat-dialog-actions></div></div></div></div></div></div></div></mat-dialog-content>these is html component code and here is my .ts component code
import { Component, Inject, OnInit } from '@angular/core';import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';@Component({ selector: 'app-update-question', templateUrl: './update-question.component.html', styleUrls: ['./update-question.component.scss']})export class UpdateQuestionComponent implements OnInit { editedQuestion: string = ''; options!: string[]; id: any; selectedOption: string = ''; answerkey: any; isEditMode: boolean = false; constructor( public dialogRef: MatDialogRef<UpdateQuestionComponent>, @Inject(MAT_DIALOG_DATA) public data: any ) {} ngOnInit(): void { console.log('Getting the data inside the dialog', this.data); this.editedQuestion = this.data.question; this.options = [...this.data.options]; this.id = this.data.id; this.answerkey = this.data.answerkey; } submitButton(): void { const updatedQuestionData = { question_id: this.id, question: this.editedQuestion, optiona: this.options[0] || '', optionb: this.options[1] || '', optionc: this.options[2] || '', optiond: this.options[3] || '', answerkey: this.answerkey || '', }; this.dialogRef.close(updatedQuestionData); } toggleEditMode(): void { this.isEditMode = !this.isEditMode; } trackByIndex(index: number, obj: any): any { return index; }}Please give me any suggestion so that here I can change only the text and all html tags should remain as it is because some time there will be nested tags as well.