product dependente do input

src/app/admin/product/product.ts

@@ -8,30 +8,31 @@ export class Product {
     description!: string;
     conditionId!: string;
     price!: number;
-    countryId!: string | null;
-    stateId!: string | null;
-    cityId!: string | null;
-    neighbourhoodId!: string | null;
-    zip_code!: string | null;
+    previousPrice?: number;
+    countryId?: string;
+    stateId?: string;
+    cityId?: string;
+    neighbourhoodId?: string;
+    zip_code?: string;
     createdAt!: Date;
-    approvedAt!: Date | null;
-    updatedAt!: Date | null;
+    approvedAt?: Date;
+    updatedAt?: Date;
     isActive!: boolean;
     isPromoted!: boolean;
-    viewCount!: number | null;
+    viewCount?: number;
     //user?: User;
     //category?: Category;
     //sub_category?: SubCategory;
     //brand?: Brand;
     //condition?: Condition;
-    //country?: Country | null;
-    //state?: State | null;
-    //city?: City | null;
-    //neighbourhood?: Neighbourhood | null;
+    //country?: Country;
+    //state?: State;
+    //city?: City;
+    //neighbourhood?: Neighbourhood;
     //favorites?: Array<Favorite>;
     //comments?: Array<Comment>;
-    //img_urls?: Array<ProductImg>;
-    //report?: Report | null;
+    img_urls?: Array<string>;
+    //report?: Report;
     //shares?: Array<Share>;
     //_count?: ProductCount;
 }

src/app/public/home/home.component.html

@@ -27,7 +27,7 @@
     </div>
     <div class="d-flex flex-row flex-nowrap overflow-auto">
       <div *ngFor="let product of products" class="card-col">
-        <ngx-home-product></ngx-home-product>          
+        <ngx-home-product [product]="product"></ngx-home-product>          
       </div>
     </div>
   </div>

src/app/public/home/home.component.ts

@@ -24,7 +24,7 @@ export class HomeComponent implements OnDestroy {
   private destroy$: Subject<void> = new Subject<void>();
   banners: Banner[];
   categories: Category[];
-  products: any[];
+  products: Product[];
   paidAds: any[];
 
   constructor() {}
@@ -78,7 +78,62 @@ export class HomeComponent implements OnDestroy {
     
     ]
 
-    this.products = [1,1,1,1,1,1]
+    this.products = [{
+      id: "1",
+      userId: "1",
+      categoryId: "1",
+      sub_categoryId: "1",
+      brandId: "1",
+      name: "Maquina de lavar roupa 14kg sper blaster",
+      description: "",
+      conditionId: "1",
+      price: 3458.10,
+      previousPrice: 4458.10,
+      createdAt: new Date(),
+      isActive: true,
+      isPromoted: true,
+      viewCount: 0,
+      img_urls: [
+        "https://img.olx.com.br/images/89/890461810585731.webp"
+      ]
+    },
+    {
+      id: "1",
+      userId: "1",
+      categoryId: "1",
+      sub_categoryId: "1",
+      brandId: "1",
+      name: "Maquina de lavar roupa 14kg sper blaster 2",
+      description: "",
+      conditionId: "1",
+      price: 3458.10,
+      previousPrice: 4458.10,
+      createdAt: new Date(),
+      isActive: true,
+      isPromoted: false,
+      viewCount: 0,
+      img_urls: [
+        "https://img.olx.com.br/images/89/890461810585731.webp"
+      ]
+    },
+    {
+      id: "1",
+      userId: "1",
+      categoryId: "1",
+      sub_categoryId: "1",
+      brandId: "1",
+      name: "Maquina de lavar roupa 14kg sper blaster 3",
+      description: "",
+      conditionId: "1",
+      price: 3458.10,
+      createdAt: new Date(),
+      isActive: true,
+      isPromoted: true,
+      viewCount: 0,
+      img_urls: [
+        "https://img.olx.com.br/images/89/890461810585731.webp"
+      ]
+    }]
 
     this.paidAds = [1,1,1]
   }

src/app/public/home/product/product.component.html

@@ -1,18 +1,30 @@
-<nb-card>
+<nb-card class="product" *ngIf="product">
   <nb-card-header class="card-img-top">
     <ul>
       <li>
-        <img src="https://img.olx.com.br/images/89/890461810585731.webp" />
-
+        <img [src]="product.img_urls[0]" />
       </li>
     </ul>
-    <span class="badge">Destaque</span>
+    <span *ngIf="product.isPromoted" class="badge">Destaque</span>
   </nb-card-header>
   <nb-card-body>
-    <h5 class="card-title">Bioledz 38400 - 800 watts</h5>
-    <p class="card-text">R$ 3.475,99</p>
+    <h5 class="card-title">{{ product.name }}</h5>
+    <p class="card-text">
+      {{ product.price | currency : "BRL" }}
+      <small *ngIf="product.previousPrice" class="ml-2 text-muted" style="text-decoration: line-through">{{ product.previousPrice | currency : "BRL" }}</small>
+    </p>
   </nb-card-body>
-  <ul class="list-group list-group-flush">
-    <li class="list-group-item">An item</li>
+  <ul class="list-group list-group-flush mb-3">
+    <li class="list-group-item">
+      <p class="card-text mb-1">
+        <i class="fa fa-map-pin mr-2"></i>
+        <small class="text-muted">São Paulo</small>
+      </p>
+      <p class="card-text">
+        <small class="text-muted">{{
+          product.createdAt | date : "dd/MM/yyyy HH:mm"
+        }}</small>
+      </p>
+    </li>
   </ul>
-</nb-card>
+</nb-card>

src/app/public/home/product/product.component.scss

@@ -2,6 +2,10 @@
 @import 'bootstrap/scss/mixins/breakpoints';
 @import '@nebular/theme/styles/global/breakpoints';
 
+.product {
+  cursor: pointer;  
+}
+
 .card-img-top {
   font-size: 1.125rem;
   -webkit-user-select: none;
@@ -72,4 +76,5 @@
   display: block;
   text-overflow: ellipsis;
   padding: 4px 8px;
-}
+}
+