Expected behavior So I'm attempting the WYSIWYG Editor to help a user format a description as they see fit and then upload their description along with other details in a post card.

Actual behavior The thing I notice is when I check by console logging the inputs in the WYSIWYG editor, it gives me the all the" < div> ","< br>,< li>, and all other formatting tags associated with it which wouldn't be a problem if I didn't have to read back the assigned description field in a card which shows all the tags.

Resources (screenshots, code snippets etc.)

HTML:

<h5><b>Job Details</b></h5>
            <div class="row">
              <div class="col">
                <mdb-wysiwyg [options]="descOptions" (valueChange)="onValueChange($event)" value="{{this.descPlaceHold}}"></mdb-wysiwyg>
              </div>
            </div>
...
<a class="text-success" (click)="add()">
...
<div class="container" style="text-align: left; white-space: pre-line">{{job[modalIndex]?.description}}</div>

Typscript:

public descPlaceHold: string = "Description:<br><br><br><br><br><br><br><br><br><br>Qualifications:";

  onValueChange(valueChange){
this.userModel.description=valueChange;
console.log(this.userModel.description);
  }

  add() {

    console.log("here's the job listed");

this.jobModel=new Job(
  (this.personList.length) + 1,
  (this.personList.length) + 1,
  this.userModel.title,
  // JSON.stringify(this.userModel.date),
  this.userModel.date,
  this.userModel.location,
  this.userModel.status,
  this.userModel.openings,
  this.userModel.duration,
  this.userModel.description,
  '',
  this.userModel.agency,
  null,
  this.userModel.clearance,
  '',
  this.userModel.market,
  '',
  this.userModel.budgeted,
  null,
  '',
  false,
  false
  );
console.log(this.jobModel);
this.awaitingPersonList[0] = { id: (this.personList.length) + 1,
  title: this.userModel.title,
  date: this.userModel.date,
  location: this.userModel.location,
  status: this.userModel.status,
  openings: this.userModel.openings,
  duration: this.userModel.duration,
  description: this.userModel.description }
if (this.awaitingPersonList.length > 0) {
  if ((this.userModel.title !== undefined && this.userModel.title !== "") 
    && (this.userModel.date !== undefined)
    && (this.userModel.location !== undefined && this.userModel.location !== "")
    && (this.userModel.status !== undefined)
    && (this.userModel.openings !== undefined)
    && (this.userModel.duration !== undefined)
    )
  {
    const person = this.awaitingPersonList[0];
    // this.personList.push(person);
    this.jerbProposals.push(this.jobModel);
    // this.jerbchanges.push(person);
    this.awaitingPersonList.splice(0, 1);
    this.cdRef.detectChanges();
    this.errorService.showInfo('Your new listing has been submitted for approval.');
    console.log(this.jerbProposals[0].title);
    console.log(this.jerbProposals[0].description);
    console.log(this.userModel.description);
  }
  else
  {
    alert("Please fill in all required fields.*")
    // console.log(this.userModel.title);
    // console.log(this.userModel.date);
    // console.log(this.userModel.location);
    // console.log(this.userModel.status);
    // console.log(this.userModel.openings);
    // console.log(this.userModel.duration);
      }
    }
  }

Pictures(you really gotta fix the image up-loader not recognizing caps on .JPG/.PNG format): https://imgur.com/a/RqCS15v