### npm i --force ด้วย เพิ่ม "ngx-quill": "^15.0.0" ไป

package.json

@@ -40,10 +40,10 @@
     "angular-calendar": "^0.31.0",
     "angular2-draggable": "^16.0.0",
     "angularx-flatpickr": "^7.3.0",
-    "face-api.js": "^0.22.2",
     "autoprefixer": "^10.4.17",
     "date-fns": "^3.3.1",
     "echarts": "^5.4.3",
+    "face-api.js": "^0.22.2",
     "filepond": "^4.30.6",
     "filepond-plugin-get-file": "^1.1.0",
     "firebase": "^10.7.1",
@@ -57,8 +57,8 @@
     "ng-drag-drop": "^5.0.0",
     "ng-gallery": "^11.0.0",
     "ng2-charts": "^5.0.4",
-    "ng2-file-upload": "^8.0.0",
     "ng2-daterangepicker": "^3.0.1",
+    "ng2-file-upload": "^8.0.0",
     "ng2-nouislider": "^2.0.0",
     "ngx-bar-rating": "^6.0.0",
     "ngx-color-picker": "^16.0.0",
@@ -69,6 +69,7 @@
     "ngx-editor": "^16.0.1",
     "ngx-filepond": "^7.0.3",
     "ngx-owl-carousel-o": "^17.0.0",
+    "ngx-quill": "^15.0.0",
     "ngx-slider-v2": "^17.0.0",
     "ngx-toastr": "^18.0.0",
     "npm": "^10.2.5",
@@ -76,6 +77,7 @@
     "postcss-cli": "^11.0.0",
     "postcss-import": "^16.0.0",
     "preline": "^1.9.0",
+    "quill": "^1.3.7",
     "react": "^18.2.0",
     "rxjs": "~7.8.0",
     "sass": "^1.69.7",

src/app/DPU/common/common.module.ts

@@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { CommonComponent } from './common.component';
 import { RouterModule, Routes } from '@angular/router';
+import { SharedModule } from '../../shared/shared.module';
 export const admin: Routes = [
   {
     path: 'admin', children: [{

src/app/DPU/common/company-manage/company-manage.component.html

@@ -85,7 +85,8 @@
                     <span class="block mb-1 whitespace-pre-wrap">
                       <i
                         class="ri-home-line me-2 align-middle text-[.875rem] text-[#8c9097] dark:text-white/50 inline-flex"></i>
-                      {{item.companyDetail}}
+                        <app-rendered-html [htmlContent]="item.companyDetail"></app-rendered-html>
+                      <!-- {{item.companyDetail}} -->
                     </span>
                   </div>
                 </td>

src/app/DPU/common/user-management/user-setting/user-setting.component.html

@@ -68,6 +68,7 @@
               </tr>
             </thead>
             <tbody>
+              @if (filterList.length > 0) {
               @for(item of filterList;track filterList){
 
               <tr class="border border-defaultborder dark:border-defaultborder/10">
@@ -133,7 +134,18 @@
                 </td>
               </tr>
               }
-
+              } @else {
+              <tr>
+                <td [attr.colspan]="6" class="text-center py-4">
+                  <ng-container *ngIf="itemsList.length === 0 && !searchTerm">
+                    <p>กำลังโหลดข้อมูล หรือไม่มีข้อมูลเลย...</p>
+                  </ng-container>
+                  <ng-container *ngIf="itemsList.length > 0 && filterList.length === 0 && searchTerm">
+                    <p>ไม่พบข้อมูลที่ค้นหา...</p>
+                  </ng-container>
+                </td>
+              </tr>
+              }
             </tbody>
           </table>
         </div>

src/app/DPU/company-management/company-management.module.ts

@@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { InstallManagementComponent } from './company-management.component';
 import { RouterModule, Routes } from '@angular/router';
+import { SharedModule } from '../../shared/shared.module';
 
 export const companyRoutes: Routes = [
 

src/app/components/rendered-html/rendered-html.component.html

+<!-- <div [innerHTML]="safeHtml" class="test"></div> -->
+<div *ngIf="htmlContent">
+  <quill-view-html [content]="htmlContent" theme="snow"></quill-view-html>
+</div>

src/app/components/rendered-html/rendered-html.component.spec.ts

+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { RenderedHtmlComponent } from './rendered-html.component';
+
+describe('RenderedHtmlComponent', () => {
+  let component: RenderedHtmlComponent;
+  let fixture: ComponentFixture<RenderedHtmlComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ RenderedHtmlComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RenderedHtmlComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/rendered-html/rendered-html.component.ts

+import { Component, Input, ViewEncapsulation } from '@angular/core';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+
+@Component({
+  selector: 'app-rendered-html',
+  templateUrl: './rendered-html.component.html',
+  styleUrls: ['./rendered-html.component.scss'],
+  encapsulation: ViewEncapsulation.None
+
+})
+export class RenderedHtmlComponent {
+  @Input() htmlContent: string;
+  safeHtml: SafeHtml;
+
+  constructor(private sanitizer: DomSanitizer) {}
+
+  ngOnChanges() {
+    if (this.htmlContent) {
+      this.safeHtml = this.sanitizer.bypassSecurityTrustHtml(this.htmlContent);
+    }
+  }
+
+  ngAfterViewInit() {
+  }
+}

src/app/shared/shared.module.ts

@@ -19,6 +19,9 @@ import { LandingLayoutComponent } from './layouts/landing-layout/landing-layout.
 import { NgxColorsModule } from 'ngx-colors';
 import { AuthService } from './services/auth.service';
 import { TranslateModule } from '@ngx-translate/core';
+import { RenderedHtmlComponent } from '../components/rendered-html/rendered-html.component';
+import { QuillModule } from 'ngx-quill';
+
 
 @NgModule({
   declarations: [
@@ -33,7 +36,8 @@ import { TranslateModule } from '@ngx-translate/core';
     HoverEffectSidebarDirective,
     AuthenticationLayoutComponent,
     LandingSwitcherComponent,
-    LandingLayoutComponent
+    LandingLayoutComponent,
+    RenderedHtmlComponent
   ],
 
   imports: [
@@ -43,7 +47,8 @@ import { TranslateModule } from '@ngx-translate/core';
     FormsModule,
     ReactiveFormsModule,
     ColorPickerModule,
-    TranslateModule
+    TranslateModule,
+    QuillModule.forRoot(),
     // NgxColorsModule
   ],
   exports: [
@@ -58,7 +63,8 @@ import { TranslateModule } from '@ngx-translate/core';
     HoverEffectSidebarDirective,
     AuthenticationLayoutComponent,
     LandingSwitcherComponent,
-    LandingLayoutComponent
+    LandingLayoutComponent,
+    RenderedHtmlComponent
   ],
   providers: [ColorPickerService, AuthService , TranslateModule],
 })