Quill editor html class not able to style in email body

Question

am using angular 10 and included ngx quill editor to show the rich text editor. when we save the html content into database, it saves with html class type like below:

<li class="ql-indent-2">lbmlkfdnblblfdsb</li>

and when we send an email through our app, we send the above content in the email body but the css class won't available.so it is not displaying the style. How can we achieve this in Angular ?

I tried below code and didnt get any luck :

https://github.com/quilljs/quill/issues/1451

<quill-editor #body name="body" id="body" [(ngModel)]="studyNotification.messageText" (onSelectionChanged)="editorSelectionChanged($event)"
        (onEditorCreated)="editorCreated($event)" [style]="{height: '250px', background: 'white'}">
       
         <div id="toolbar-container"  quill-editor-toolbar>                
            <!-- Text Size  -->
           <span class="ql-formats">
             <select class="ql-font"></select>
             <select class="ql-size"></select>
           </span>
           <!-- Text Formatting  -->
           <span class="ql-formats">
             <button class="ql-bold"></button>
             <button class="ql-italic"></button>
             <button class="ql-underline"></button>
             <button class="ql-strike"></button>
           </span>
           <span class="ql-formats">
             <select class="ql-color"></select>
             <select class="ql-background"></select>
           </span>
             <!-- Subscript/superscript  -->
           <span class="ql-formats">
             <button class="ql-script" value="sub"></button>
             <button class="ql-script" value="super"></button>
           </span>
           <!-- Text Block format -->
              <!-- Header Sizes  -->
           <span class="ql-formats">
             <button class="ql-header" value="1"></button>
             <button class="ql-header" value="2"></button>
             <!-- <button class="ql-blockquote"></button>
             <button class="ql-code-block"></button> -->
           </span>
            <!-- Ordered List / Bullets   -->
             <!--  Indenting -->
           <span class="ql-formats">
             <button class="ql-list" value="ordered"></button>
             <!-- <button class="ql-list" value="bullet"></button> -->
             <button class="ql-indent" value="-1"></button>
             <button class="ql-indent" value="+1"></button>
           </span>
          <span class="ql-formats">
            <!--   <button class="ql-direction" value="rtl"></button> -->
             <select class="ql-align"></select>
           </span>
           <span class="ql-formats">
             <button class="ql-link"></button>
             <button class="ql-image"></button>
             <button class="ql-video"></button>
             <!-- <button class="ql-formula"></button> -->
           </span>
           <!-- <span class="ql-formats">
             <button class="ql-clean"></button>
           </span> -->
         </div>
      
       </quill-editor>