image-cropper component, drag & drop bilder

bizmatch/src/app/pages/details/details-listing/details-listing.component.html

@@ -13,7 +13,7 @@
 
                         <li class="flex align-items-center py-3 px-2 flex-wrap">
                             <div class="text-500 w-full md:w-2 font-medium">Description</div>
-                            <div class="text-900 w-full md:w-10 line-height-3">{{listing?.description}}</div>
+                            <div class="text-900 w-full md:w-10 line-height-3" [innerHTML]="description"></div>
                         </li>
                         @if (listing && (listing.listingsCategory==='business')){
                         <li class="flex align-items-center py-3 px-2 flex-wrap surface-ground">

bizmatch/src/app/pages/details/details-listing/details-listing.component.ts

@@ -24,6 +24,7 @@ import { MessageService } from 'primeng/api';
 import { SharedModule } from '../../../shared/shared/shared.module';
 import { GalleriaModule } from 'primeng/galleria';
 import { environment } from '../../../../environments/environment';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 @Component({
   selector: 'app-details-listing',
   standalone: true,
@@ -59,13 +60,15 @@ export class DetailsListingComponent {
   propertyImages: ImageProperty[] = []
   environment = environment;
   user:User
+  description:SafeHtml;
   constructor(private activatedRoute: ActivatedRoute,
     private listingsService: ListingsService,
     private router: Router,
     private userService: UserService,
     public selectOptions: SelectOptionsService,
     private mailService: MailService,
-    private messageService: MessageService) {
+    private messageService: MessageService,
+    private sanitizer: DomSanitizer) {
     this.userService.getUserObservable().subscribe(user => {
       this.user = user
     });
@@ -76,6 +79,7 @@ export class DetailsListingComponent {
   async ngOnInit() {
     this.listing = await lastValueFrom(this.listingsService.getListingById(this.id, this.type));
     this.propertyImages = await this.listingsService.getPropertyImages(this.listing.id)
+    this.description=this.sanitizer.bypassSecurityTrustHtml(this.listing.description);
   }
   back() {
     this.router.navigate(['listings', this.criteria.listingsCategory])