gather and handle data from the shared interface between different parts

Question

gather and handle data from the shared interface between different parts

I have two different paths. One is for products and the other is for products-cart. I want to use a shared ts file for both to store the product and cart information in an array. However, I am encountering an issue. I am unable to make any changes or transfers. Whenever I add something to the cart array, the data I retrieve from the product-cart remains empty. I was advised to resolve this using observables, but my attempts were unsuccessful. My goal is to have 3 products that can be added from localhost:4200/products and viewed in localhost:4200/products/product-cart even though these are separate routes. Note (URLs are for images)

data.service.ts

    import { Injectable } from "@angular/core";
    import { Product } from "./product";

    @Injectable()

    export class DataService{

        productsData:Array<Product>=[
        {name:'Tomato',total:10, url:'https://migrostvstr.blob.core.windows.net/migrostv/2021/08/domates-kg-c7462d-1650x1650-1.jpg'},
        {name:'Potato',total:27, url:'https://migros-dali-storage-prod.global.ssl.fastly.net/sanalmarket/product/28303000/patlican-kemer-kg-2ac52c-1650x1650.jpg'},
        {name:'Garlic',total:20, url:'https://migros-dali-storage-prod.global.ssl.fastly.net/sanalmarket/product/28293383/28293383-874ca9-1650x1650.jpg'}
        ];

        


        productscard:Array<Product>=[];

        constructor(){}

    }

products.component.ts

    import { Component, OnInit,Output } from '@angular/core';
import { EventEmitter } from '@angular/core';
import { DataService } from '../data.service';
import { Product } from '../product';


@Component({
  selector: 'app-products',
  templateUrl: './products.component.html',
  styleUrls: ['./products.component.css']
})
export class ProductsComponent implements OnInit {
    
  constructor(private data:DataService) { }

  ngOnInit() {

    console.log(this.data.productsData)
    
  }

  getItems(value){
    
  }

}

product-cart.components.ts

    import { Component, OnInit } from '@angular/core';
import { Input } from '@angular/core';
import { Product} from '../product';
import { DataService } from '../data.service';

@Component({
  selector: 'app-product-cart',
  templateUrl: './product-cart.component.html',
  styleUrls: ['./product-cart.component.css']
})
export class ProductCartComponent implements OnInit {

  constructor(private datacart:DataService) { }

  ngOnInit (){
    console.log(this.datacart.productscard)
  }

}

products.component.html

<div class="products">
  <div class="product-cards" *ngFor="let items of newData">
    <img class="icons" src="{{items.url}}">
    <div class="items-style">
      <div>
        Product name: {{items.name}}
      </div>
      <div>
        Quantity: {{items.total}}
      </div>
      <a class="add-icon"><i class="fas fa-cart-plus fa-2x icon"(click)="getItems(items)" ></i></a>
    </div>
  </div>
</div>

angular typescript

Answer 1

Answer №1

data.service:

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

export interface Product {
  name: any;
  total: any;
  url: any;
}

@Injectable({
  providedIn: 'root',
})
export class DataService {

  productsCart: Product[] = [];
  productsCart$ = new BehaviorSubject<Product[]>([]);

  productsData: Array<Product> = [
    {
      name: 'Tomato',
      total: 10,
      url: '...',
    },
    {
      name: 'Patato',
      total: 27,
      url: '...',
    },
    {
      name: 'Garlic',
      total: 20,
      url: '...',
    },
  ];

  addToCart(product: Product): void {
    this.productsCart.push(product);
    this.productsCart$.next(this.productsCart);
  }
}

ProductsComponent:

import { Component, OnInit } from '@angular/core';
import { DataService, Product } from '../data.service';

@Component({
  selector: 'app-products',
  templateUrl: './products.component.html',
  styleUrls: ['./products.component.scss'],
})
export class ProductsComponent implements OnInit {
  constructor(private service: DataService) {}

  ngOnInit() {
    console.log(this.service.productsData);
  }

  addToCart() {
    const product = {
      name: 'Tomato',
      total: 10,
      url: '...',
    };
    this.service.addToCart(product);
  }
}

ProductCartComponent:

import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';

@Component({
  selector: 'app-product-cart',
  templateUrl: './product-cart.component.html',
  styleUrls: ['./product-cart.component.scss'],
})
export class ProductCartComponent implements OnInit {
  constructor(private service: DataService) {}

  ngOnInit() {
    this.service.productsCart$.subscribe((data) => {
      console.log(JSON.stringify(data));
    });
  }
}

Answer 2

data.service:

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

export interface Product {
  name: any;
  total: any;
  url: any;
}

@Injectable({
  providedIn: 'root',
})
export class DataService {

  productsCart: Product[] = [];
  productsCart$ = new BehaviorSubject<Product[]>([]);

  productsData: Array<Product> = [
    {
      name: 'Tomato',
      total: 10,
      url: '...',
    },
    {
      name: 'Patato',
      total: 27,
      url: '...',
    },
    {
      name: 'Garlic',
      total: 20,
      url: '...',
    },
  ];

  addToCart(product: Product): void {
    this.productsCart.push(product);
    this.productsCart$.next(this.productsCart);
  }
}

ProductsComponent:

import { Component, OnInit } from '@angular/core';
import { DataService, Product } from '../data.service';

@Component({
  selector: 'app-products',
  templateUrl: './products.component.html',
  styleUrls: ['./products.component.scss'],
})
export class ProductsComponent implements OnInit {
  constructor(private service: DataService) {}

  ngOnInit() {
    console.log(this.service.productsData);
  }

  addToCart() {
    const product = {
      name: 'Tomato',
      total: 10,
      url: '...',
    };
    this.service.addToCart(product);
  }
}

ProductCartComponent:

import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';

@Component({
  selector: 'app-product-cart',
  templateUrl: './product-cart.component.html',
  styleUrls: ['./product-cart.component.scss'],
})
export class ProductCartComponent implements OnInit {
  constructor(private service: DataService) {}

  ngOnInit() {
    this.service.productsCart$.subscribe((data) => {
      console.log(JSON.stringify(data));
    });
  }
}

Answer 3

Answer №2

Ensure that you have included the service in your module providers (if you are using a single module, it should be the appModule). In your service, add the following:

//RxJs BehaviorSubject for initializing value
productsDataEmitter: BehaviorSubject<Array<Product>>
                            =new BehaviorSubject([
                              {name:'Tomato',total:10, url:'https://migrostvstr.blob.core.windows.net/migrostv/2021/08/domates-kg-c7462d-1650x1650-1.jpg'},
                              {name:'Patato',total:27, url:'https://migros-dali-storage-prod.global.ssl.fastly.net/sanalmarket/product/28303000/patlican-kemer-kg-2ac52c-1650x1650.jpg'},
                              {name:'Garlic',total:20, url:'https://migros-dali-storage-prod.global.ssl.fastly.net/sanalmarket/product/28293383/28293383-874ca9-1650x1650.jpg'}
                              ]);

// include this function to emit the data:
emitProductsData(products:Array<Product>){
    this.this.productsDataEmitter.next(products);
  }

Now, in any of your components:

constructor(private data:DataService) { }
// to receive the data:
this.data.productsDataEmitter.subscribe(products=>{
console.log('the data array is', products);
});

//to update the data, use:
let newData: Array[Product] = [];
this.data.emitProductsData(newData);

If you wish to read and then update the same subscribed data, ensure that you perform it within the subscribe scope:


this.data.productsDataEmitter.subscribe(products=>{
console.log('the data array is', products);
let product:Product = new Product();
let newData: Array<Product> = [...products,product];
this.data.emitProductsData(newData);
});

Answer 4

Ensure that you have included the service in your module providers (if you are using a single module, it should be the appModule). In your service, add the following:

//RxJs BehaviorSubject for initializing value
productsDataEmitter: BehaviorSubject<Array<Product>>
                            =new BehaviorSubject([
                              {name:'Tomato',total:10, url:'https://migrostvstr.blob.core.windows.net/migrostv/2021/08/domates-kg-c7462d-1650x1650-1.jpg'},
                              {name:'Patato',total:27, url:'https://migros-dali-storage-prod.global.ssl.fastly.net/sanalmarket/product/28303000/patlican-kemer-kg-2ac52c-1650x1650.jpg'},
                              {name:'Garlic',total:20, url:'https://migros-dali-storage-prod.global.ssl.fastly.net/sanalmarket/product/28293383/28293383-874ca9-1650x1650.jpg'}
                              ]);

// include this function to emit the data:
emitProductsData(products:Array<Product>){
    this.this.productsDataEmitter.next(products);
  }

Now, in any of your components:

constructor(private data:DataService) { }
// to receive the data:
this.data.productsDataEmitter.subscribe(products=>{
console.log('the data array is', products);
});

//to update the data, use:
let newData: Array[Product] = [];
this.data.emitProductsData(newData);

If you wish to read and then update the same subscribed data, ensure that you perform it within the subscribe scope:


this.data.productsDataEmitter.subscribe(products=>{
console.log('the data array is', products);
let product:Product = new Product();
let newData: Array<Product> = [...products,product];
this.data.emitProductsData(newData);
});

gather and handle data from the shared interface between different parts

Answer №1

Answer №2

Similar questions

The specified '<<custom component name>>' argument does not match the 'Type<<custom component name>>' parameter

The updated values in an Angular application may not always be accurately represented by interpolated values

The directive for accepting only numbers is not functioning in versions of Chrome 49.xx.xx and earlier

Is the Prisma model not reachable through Prisma Client?

Obtain PDF File using Typescript

Observable in RxJS with a dynamic interval

Mastering Redux Toolkit - Ensuring Payload Type Verification is in Place when Invoking an Action Creator

Interact with SOAP web service using an Angular application

Top recommendations for implementing private/authentication routes in NextJS 13

Node Sass was unable to locate a binding for the current environment you are using: OS X 64-bit running Node.js 12.x

Looking for an Ionic 3 search function to filter a JSON array?

How can I combine multiple requests in RxJS, executing one request at a time in parallel, and receiving a single combined result?

Error when running end-to-end tests in Angular CLI using the ng e2e

Transforming a "singular or multiple" array into an array of arrays using TypeScript

Operating on Javascript Objects with Randomized Keys

Why is my terminal showing certain output when I execute the command npm start?

Enhancement of Nebular Theme from version 4.4.0 to 9.0.1 in relation to Angular (from 8.2.3 to 13.2.1)

What is the best way to get my Discord bot to respond in "Embed" format using TypeScript?

Patience is key as you await the completion of an API call in Angular 14

Angular 7 flex layout ensures that the table fills its parent container completely without overstretching it