Using Angular 7 shared service to allow sibling components to exchange data between each other

Question

Using Angular 7 shared service to allow sibling components to exchange data between each other

In my Angular 7 application, I have two sibling components - a configurator component and a custom stepper component. The configurator component is responsible for fetching data from the API and performing calculations on it. I would like to display the calculated values in the custom stepper component.

I have created a service called PriceWeightService but I am unsure about which code should be moved where and how to retrieve the values from that service in the custom stepper component.

The configurator.component.ts contains the following code:

 //Code from configurator component
//...

The custom-stepper.component.ts file contains the following code:

// Code from custom-stepper component
// ...

This is the HTML for the custom stepper component where I want to display the values:

// HTML code for displaying values in custom stepper component
// ...

I have included the PriceWeightService in the project with the following code:

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

@Injectable({
  providedIn: 'root',
})
export class PriceWeightService {
  weight = 0;
}

javascript angular typescript angular-material angular-services

Answer 1

Answer №1

Define attributes within the service:

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

@Injectable({
  providedIn: 'root',
})
export class ProductDetailsService {
  quantity = 0;
}

Inject the service into both modules

constructor(private productDetails: ProductDetailsService){}

Assign a value to the service attribute from your configurator component as shown below

this.productDetails.quantity = this.getTotalQuantity();

Services act as singletons, so any changes made will reflect in other components using the service.

To access the service attribute in your step component, either make the service public or create a getter method.

constructor(public productDetails: ProductDetailsService){}

<p>{{productDetails.quantity}}</p>

or

constructor(private productDetails: ProductDetailsService){}

get quantity(){
  return this.productDetails.quantity;
}

<p>{{quantity}}</p>

The specific code snippet you require

service

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

@Injectable({
  providedIn: 'root',
})
export class ProductDetailsService {
  price = 0;
  quantity = 0;
}

configurator.component.ts

this.httpClient.get(`${environment.apiUrl}`, httpOptions).subscribe(
            (data) => {
                this.parseData(data);
                console.log('Selected:', this.selected);
                this.productDetailsService.quantity = this.getTotalQuantity();
                this.productDetailsService.price = this.getTotalPrice();
            },
            (error) => {
                console.log('Error', error);
            }
        );

custom-step.component.ts

  constructor(private productDetails: ProductDetailsService){}

  get totalQuantity(){
    return this.productDetails.quantity;
  }

  get totalPrice(){
    return this.productDetails.price;
  }

Answer 2

Define attributes within the service:

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

@Injectable({
  providedIn: 'root',
})
export class ProductDetailsService {
  quantity = 0;
}

Inject the service into both modules

constructor(private productDetails: ProductDetailsService){}

Assign a value to the service attribute from your configurator component as shown below

this.productDetails.quantity = this.getTotalQuantity();

Services act as singletons, so any changes made will reflect in other components using the service.

To access the service attribute in your step component, either make the service public or create a getter method.

constructor(public productDetails: ProductDetailsService){}

<p>{{productDetails.quantity}}</p>

or

constructor(private productDetails: ProductDetailsService){}

get quantity(){
  return this.productDetails.quantity;
}

<p>{{quantity}}</p>

The specific code snippet you require

service

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

@Injectable({
  providedIn: 'root',
})
export class ProductDetailsService {
  price = 0;
  quantity = 0;
}

configurator.component.ts

this.httpClient.get(`${environment.apiUrl}`, httpOptions).subscribe(
            (data) => {
                this.parseData(data);
                console.log('Selected:', this.selected);
                this.productDetailsService.quantity = this.getTotalQuantity();
                this.productDetailsService.price = this.getTotalPrice();
            },
            (error) => {
                console.log('Error', error);
            }
        );

custom-step.component.ts

  constructor(private productDetails: ProductDetailsService){}

  get totalQuantity(){
    return this.productDetails.quantity;
  }

  get totalPrice(){
    return this.productDetails.price;
  }

Using Angular 7 shared service to allow sibling components to exchange data between each other

Answer №1

Similar questions

Altering the character by striking a key

What is the best way to include JSX in a separate HTML file?

Simultaneous malfunction of two ajax forms

Question from a student: What is the best way to transfer information between different classes?

Looking for assistance in establishing a connection between Node.js and Angular.js

VueJS 3 is in the process of loading dynamic assets

Flipping and rotating images using the power of HTML5 Canvas

Tips for successfully passing a ViewBag in ng-click

Preventing autoscrolling in Ionic's dual side menu template when additional content is added

TypeScript does not automatically determine the type of a passed generic parameter

Combining the power of AngularJS with the versatility of sails

When attempting to compress JavaScript with uglify-js, an unexpected token error occurs with the symbol ($)

A helpful tip on incorporating Snack Bar Material UI within an if statement

Establishing default parameters for angular pipes

Exploring the getJSON function within jQuery

Using the mt-downloader module in a Node application is a straightforward process

Angular2: The provided arguments do not correspond to any valid call signature

How to resolve the error of "Cannot GET /api/courses/1"

Issue with regex replacement behaving differently in Node compared to console

Retrieve the chosen option from a dropdown menu and transfer it to the submit button in PHP