refactor(example-app): refactor to remove some old modules from examp…

…le app

apps/example-app/src/app/examples/components/product-basket/product-basket.component.ts

@@ -124,7 +124,12 @@ import { input } from '@angular/core';
         background-color: #009688;
       }
       mat-form-field {
-        width: 40px;
+        width: 50px;
+        input::-webkit-outer-spin-button,
+        input::-webkit-inner-spin-button {
+          -webkit-appearance: none;
+          margin: 0;
+        }
       }
     `,
   ],

apps/example-app/src/app/examples/examples-routing.module.ts

@@ -10,42 +10,48 @@ const routes: Routes = [
   },
   {
     path: 'product-list',
-    loadChildren: () =>
-      import('./product-list-page').then((m) => m.ProductListPageModule),
+    loadComponent: () =>
+      import('./product-list-page/product-list-page-container.component').then(
+        (m) => m.ProductListPageContainerComponent
+      ),
   },
   {
     path: 'product-list-paginated',
-    loadChildren: () =>
-      import('./product-list-paginated-page').then(
-        (m) => m.ProductListPaginatedPageModule
-      ),
+    loadComponent: () =>
+      import(
+        './product-list-paginated-page/product-list-paginated-page-container.component'
+      ).then((m) => m.ProductListPaginatedPageContainerComponent),
   },
   {
     path: 'product-picker',
-    loadChildren: () =>
-      import('./product-picker-page').then((m) => m.ProductPickerPageModule),
+    loadComponent: () =>
+      import(
+        './product-picker-page/product-picker-page-container.component'
+      ).then((m) => m.ProductPickerPageContainerComponent),
   },
   {
     path: 'product-shop',
     loadChildren: () =>
-      import('./product-shop-page').then((m) => m.ProductShopPageModule),
+      import('./product-shop-page/product-shop-page-routing.module').then(
+        (m) => m.ProductShopPageRoutingModule
+      ),
   },
   {
     path: 'cache-and-dropdowns',
-    loadChildren: () =>
-      import('./cache-and-dropdowns-page').then(
-        (m) => m.CacheAndDropdownsPageModule
-      ),
+    loadComponent: () =>
+      import(
+        './cache-and-dropdowns-page/cache-and-dropdowns-page.component'
+      ).then((m) => m.CacheAndDropdownsPageComponent),
   },
   { path: '**', redirectTo: '/not-found' },
 ];
 
 @NgModule({
   imports: [
     RouterModule.forRoot(routes, {
-    scrollPositionRestoration: 'enabled',
-    paramsInheritanceStrategy: 'always'
-}),
+      scrollPositionRestoration: 'enabled',
+      paramsInheritanceStrategy: 'always',
+    }),
   ],
   exports: [RouterModule],
 })

apps/example-app/src/app/examples/product-list-page/product-list-page-container.component.ts

@@ -1,15 +1,15 @@
 import { Component, OnInit } from '@angular/core';
 import { ProductActions, ProductSelectors } from './state/products';
-import { combineLatest } from 'rxjs';
 import { Product, ProductFilter } from '../models';
 import { createSelector, Store } from '@ngrx/store';
-import { map } from 'rxjs/operators';
 import { Sort } from '@ngrx-traits/common';
 import { MatButtonModule } from '@angular/material/button';
 import { ProductListComponent } from '../components/product-list/product-list.component';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatCardModule } from '@angular/material/card';
 import { AsyncPipe } from '@angular/common';
+import { ProductSearchFormComponent } from '../components/product-search-form/product-search-form.component';
+import { ProductsStateModule } from './state/products/products-state.module';
 
 @Component({
   selector: 'ngrx-traits-product-list-example-container',
@@ -20,9 +20,9 @@ import { AsyncPipe } from '@angular/common';
         <mat-card-title>Product List</mat-card-title>
       </mat-card-header>
       <mat-card-content>
-        <!--        <product-search-form-->
-        <!--          (searchProduct)="filter($event)"-->
-        <!--        ></product-search-form>-->
+        <product-search-form
+          (searchProductChange)="filter($event)"
+        ></product-search-form>
         @if (data.isLoading) {
         <mat-spinner></mat-spinner>
         } @else {
@@ -65,10 +65,12 @@ import { AsyncPipe } from '@angular/common';
   standalone: true,
   imports: [
     MatCardModule,
+    ProductsStateModule,
     MatProgressSpinnerModule,
     ProductListComponent,
     MatButtonModule,
     AsyncPipe,
+    ProductSearchFormComponent,
   ],
 })
 export class ProductListPageContainerComponent implements OnInit {
@@ -95,8 +97,8 @@ export class ProductListPageContainerComponent implements OnInit {
     this.store.dispatch(ProductActions.checkout());
   }
 
-  filter(filters: ProductFilter) {
-    this.store.dispatch(ProductActions.filterProducts({ filters }));
+  filter(filters: ProductFilter | undefined) {
+    filters && this.store.dispatch(ProductActions.filterProducts({ filters }));
   }
   // new event handler ↓
   sort(sort: Sort<Product>) {