Formatted product viewer

src/app/store/newProduct/newProduct.component.ts

@@ -47,6 +47,8 @@ export class NewProductComponent {
     };
     if (this.image) newProduct['image'] = this.image;
 
+    console.log(newProduct.description);
+
     if (!this.data.product) {
       this.db
         .collection('products')

src/app/store/products/products.component.html

@@ -2,11 +2,12 @@
     <div class="container">
         <div class="row">
             <div class="col-12 py-4">
-                <img [src]="product.image" class="float-left img-fluid mb-4 mr-4">
+                <img [src]="product.image" class="float-left img-fluid mb-4">
                 <h2 class="roboto">{{product.name}}</h2>
                 <h5 *ngIf="product.price" class="text-muted">{{product.price | currency}}</h5>
                 <h5 *ngIf="!product.price" class="text-muted">Contact For Price</h5>
-                <hr class="ml-4" /> {{product.description}}
+                <hr class="ml-4" />
+                <p [innerHtml]="product.description"></p>
             </div>
         </div>
     </div>

src/app/store/products/products.component.ts

@@ -20,6 +20,9 @@ export class ProductsComponent {
         .subscribe(data => {
           this.product = data[0];
           this.product.image = this.domSanitizer.bypassSecurityTrustUrl(this.product.image);
+          this.product.description = this.domSanitizer.bypassSecurityTrustHtml(
+            this.product.description.replace(/(\r\n|\r|\n)/g, '<br>')
+          );
         });
     });
   }