rxjs inbtroduction

Author: santoshyadavdev

Angular-Demo/ecomApp/src/app/product/product.component.ts

@@ -4,6 +4,7 @@ import {
   Component,
   DoCheck,
   ElementRef,
+  OnDestroy,
   OnInit,
   Optional,
   QueryList,
@@ -12,9 +13,11 @@ import {
   ViewChildren,
   ViewEncapsulation,
 } from '@angular/core';
+import { Subscription } from 'rxjs';
 import { HeaderComponent } from '../header/header.component';
 import { LoggerService } from '../logger/logger.service';
 import { Product } from './product';
+import { ProductServiceRxJs } from './rxjx-demo/rxjs-demo';
 import { ProductService } from './services/product.service';
 
 @Component({
@@ -29,7 +32,7 @@ import { ProductService } from './services/product.service';
   // providers: [ProductService],
 })
 export class ProductComponent
-  implements OnInit, DoCheck, AfterViewInit, AfterViewChecked
+  implements OnInit, DoCheck, AfterViewInit, AfterViewChecked, OnDestroy
 {
   title = 'Product Information';
 
@@ -49,16 +52,17 @@ export class ProductComponent
 
   currentValue = '';
 
-
   @ViewChild(HeaderComponent)
   headerComponent!: HeaderComponent;
 
   @ViewChildren(HeaderComponent)
   headerChildrenComponent!: QueryList<HeaderComponent>;
 
+  subscription!: Subscription;
+
   @ViewChild('apiError', { static: true }) errorDiv!: ElementRef<any>;
   constructor(
-  private productService: ProductService,
+    private productService: ProductServiceRxJs,
     @Optional() private logService: LoggerService
   ) {}
 
@@ -67,7 +71,10 @@ export class ProductComponent
     // this.logService? this.logService.log('test')
     console.log(this.headerComponent);
     console.log(this.errorDiv);
-    this.productList = this.productService.getProducts();
+    // this.productList =
+    this.subscription = this.productService
+      .getProducts()
+      .subscribe((data) => console.log(data));
   }
 
   ngDoCheck() {
@@ -120,4 +127,8 @@ export class ProductComponent
   deleteProduct(product: Product) {
     this.selectedProduct = product;
   }
+
+  ngOnDestroy() {
+      this.subscription?.unsubscribe();
+  }
 }

Angular-Demo/ecomApp/src/app/product/rxjx-demo/rxjs-demo.ts

@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+import { of } from 'rxjs';
+import { tap } from 'rxjs/operators';
+import { Product } from '../product';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ProductServiceRxJs {
+  products: Product[] = [
+    { id: 1, name: 'Iphone X', mfd: new Date('1-Jan-2021'), price: 50000 },
+    { id: 2, name: 'one plus 8', mfd: new Date('1-Jan-2019'), price: 40000 },
+    { id: 3, name: 'Samsung', mfd: new Date('1-Jan-2018'), price: 30000 },
+  ];
+
+  getProducts() {
+    return of<Product[]>(this.products);
+  }
+}