feat: use ngx-datatable in product page

apps/angular/projects/catalog/src/pages/product/product.component.html

@@ -1,5 +1,21 @@
-<ul *ngIf="list$ | async; let list">
-  <li *ngFor="let item of list">
-    {{ item | json }}
-  </li>
-</ul>
+<div class="card">
+  <div class="card-header">
+    <div class="row">
+      <div class="col col-md-6">
+        <h5 class="card-title">{{ 'AbpCatalog::Products' | abpLocalization }}</h5>
+      </div>
+      <div class="text-end col col-md-6">
+        <button class="btn btn-primary">{{ 'AbpCatalog::NewProduct' | abpLocalization }}</button>
+      </div>
+    </div>
+  </div>
+  <div class="card-body">
+    <ngx-datatable [rows]="items" [count]="count" [list]="list" default>
+      <!-- TODO: localize column headers -->
+      <ngx-datatable-column name="Code" prop="code"></ngx-datatable-column>
+      <ngx-datatable-column name="Name" prop="name"></ngx-datatable-column>
+      <ngx-datatable-column name="Price" prop="price"></ngx-datatable-column>
+      <ngx-datatable-column name="Stock Count" prop="stockCount"></ngx-datatable-column>
+    </ngx-datatable>
+  </div>
+</div>

apps/angular/projects/catalog/src/pages/product/product.component.ts

@@ -1,14 +1,27 @@
+import { ListService } from '@abp/ng.core';
 import { Component, OnInit } from '@angular/core';
-import { ProductService } from '@catalog/proxy/products';
-import { map } from 'rxjs/operators';
+import { ProductDto, ProductService } from '@catalog/proxy/products';
+
 @Component({
   selector: 'lib-product',
   templateUrl: './product.component.html',
   styleUrls: ['./product.component.css'],
+  providers: [ListService],
 })
 export class ProductComponent implements OnInit {
-  list$ = this.productService.getList().pipe(map(res => res.items));
-  constructor(public readonly productService: ProductService) {}
+  items: ProductDto[] = [];
+  count = 0;
+  constructor(public readonly productService: ProductService, public readonly list: ListService) {
+    // TODO: this is an example of paging
+    this.list.maxResultCount = 2;
+  }
+
+  ngOnInit(): void {
+    const productStreamCreator = query => this.productService.getListPaged(query);
 
-  ngOnInit(): void {}
+    this.list.hookToQuery(productStreamCreator).subscribe(response => {
+      this.items = response.items;
+      this.count = response.totalCount;
+    });
+  }
 }

apps/angular/projects/catalog/src/pages/product/product.module.ts

@@ -1,17 +1,12 @@
-import { NgModule } from '@angular/core';
+import { CoreModule } from '@abp/ng.core';
+import { ThemeSharedModule } from '@abp/ng.theme.shared';
 import { CommonModule } from '@angular/common';
-
+import { NgModule } from '@angular/core';
 import { ProductRoutingModule } from './product-routing.module';
 import { ProductComponent } from './product.component';
 
-
 @NgModule({
-  declarations: [
-    ProductComponent
-  ],
-  imports: [
-    CommonModule,
-    ProductRoutingModule
-  ]
+  declarations: [ProductComponent],
+  imports: [CommonModule, ProductRoutingModule, ThemeSharedModule, CoreModule],
 })
-export class ProductModule { }
+export class ProductModule {}