Sending the chosen dropdown ID to a different component

Question

Sending the chosen dropdown ID to a different component

In my application, there is a component named list where I am showcasing all the names of my customers in a dropdown, as illustrated below:

https://i.sstatic.net/KEmAG.png

When a particular item (i.e., customer) is selected from the dropdown, I would like to emit that id to a method/function located in another component known as display.

Code snippet for the display component:

TS file

import { Component, OnInit } from '@angular/core';
import { ContactService } from '../contacts.service';

@Component({
  selector: 'app-display',
  templateUrl: './display.component.html',
  styleUrls: ['./display.component.css']
})
export class DisplayComponent implements OnInit {
public contacts:any;
  constructor(private myService: ContactService) { }

public async ngOnInit(): Promise<void> {
 this.contacts = await this.myService.getCustomersById('id');<=== Need to pass emitted customer id to here
}

}

I am currently emitting the ID from the dropdown in the list component.
However, I am facing difficulty passing the emitted id to the services file and subscribing to that id in the display component. Although I have created a services file, I am struggling to communicate with it.

DEMO

angular typescript angular6 angular-services

Answer 1

Answer №1

Modified the click event from (onSelectionChange) to (click).

HTML Code:

<div class="main-div">
<h3>List</h3>
<mat-form-field>
  <mat-select placeholder="Select Customer">
    <mat-option *ngFor="let customer of customers" [value]="customer.id" (click)="selected($event, customer.id)">
      {{customer.customerName}}
    </mat-option>
  </mat-select>
</mat-form-field>
</div>

TS Code:

public async selected(event: MatOptionSelectionChange, id: string): Promise<void> {
    this.myService.onCustomerSelect.next(id);
}

Service.ts:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { ICustomer } from './models';
import { BehaviorSubject } from 'rxjs';

@Injectable()
export class ContactService {
 private  baseUrl : string = '../../assets/customers.json';

 onCustomerSelect: BehaviorSubject<any> = new BehaviorSubject<any>(null);
  constructor(private http: HttpClient) { }


 public getCustomers(id : string): Promise<ICustomer> {
  const apiUrl: string = '../../assets/customers.json';

  return this.http.get<ICustomer>(apiUrl + id).toPromise();
}

public async getCustomersById(id : string): Promise<ICustomer[]> {
    const apiUrl: string = `${this.baseUrl}/${id}`;

    return this.http.get<ICustomer[]>(apiUrl).toPromise();
  }

}

UPDATED STACKBLITZ

EDIT:

API can be called in the following way:

public async ngOnInit(): Promise<void> {
    this.myService.onCustomerSelect.subscribe(value => {
      console.log('FROM Display Comp -----', value);
      this.CustId = value;
      if (this.CustId) {
        this.myService.getCustomersById(this.CustId).then(response =>{
          console.log(response)
        })
      }
    })
  }

Answer 2

Modified the click event from (onSelectionChange) to (click).

HTML Code:

<div class="main-div">
<h3>List</h3>
<mat-form-field>
  <mat-select placeholder="Select Customer">
    <mat-option *ngFor="let customer of customers" [value]="customer.id" (click)="selected($event, customer.id)">
      {{customer.customerName}}
    </mat-option>
  </mat-select>
</mat-form-field>
</div>

TS Code:

public async selected(event: MatOptionSelectionChange, id: string): Promise<void> {
    this.myService.onCustomerSelect.next(id);
}

Service.ts:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { ICustomer } from './models';
import { BehaviorSubject } from 'rxjs';

@Injectable()
export class ContactService {
 private  baseUrl : string = '../../assets/customers.json';

 onCustomerSelect: BehaviorSubject<any> = new BehaviorSubject<any>(null);
  constructor(private http: HttpClient) { }


 public getCustomers(id : string): Promise<ICustomer> {
  const apiUrl: string = '../../assets/customers.json';

  return this.http.get<ICustomer>(apiUrl + id).toPromise();
}

public async getCustomersById(id : string): Promise<ICustomer[]> {
    const apiUrl: string = `${this.baseUrl}/${id}`;

    return this.http.get<ICustomer[]>(apiUrl).toPromise();
  }

}

UPDATED STACKBLITZ

EDIT:

API can be called in the following way:

public async ngOnInit(): Promise<void> {
    this.myService.onCustomerSelect.subscribe(value => {
      console.log('FROM Display Comp -----', value);
      this.CustId = value;
      if (this.CustId) {
        this.myService.getCustomersById(this.CustId).then(response =>{
          console.log(response)
        })
      }
    })
  }

Answer 3

Answer №2

One effective way to share data with components that are not directly related is by utilizing the Subject feature from rxjs. Here's an example to illustrate:

Begin by creating a new instance of Subject in your service:

import { BehaviorSubject } from 'rxjs';
static dataStream: BehaviorSubject<any> = new BehaviorSubject<any>(null);

When you need to send data from a component where the information originates, simply call this method (Assuming our service is named DataService):

DataService.dataStream.next(newValue);

To receive and access this data in a different component, subscribe to the Subject within the ngOnInit lifecycle hook. This ensures that whenever new data is sent through the same Subject instance, it will be received by all active subscriptions:

DataService.dataStream.subscribe(data => {
      console.log('Received data: ', data);
});

Answer 4

One effective way to share data with components that are not directly related is by utilizing the Subject feature from rxjs. Here's an example to illustrate:

Begin by creating a new instance of Subject in your service:

import { BehaviorSubject } from 'rxjs';
static dataStream: BehaviorSubject<any> = new BehaviorSubject<any>(null);

When you need to send data from a component where the information originates, simply call this method (Assuming our service is named DataService):

DataService.dataStream.next(newValue);

To receive and access this data in a different component, subscribe to the Subject within the ngOnInit lifecycle hook. This ensures that whenever new data is sent through the same Subject instance, it will be received by all active subscriptions:

DataService.dataStream.subscribe(data => {
      console.log('Received data: ', data);
});

Sending the chosen dropdown ID to a different component

Answer №1

Answer №2

Similar questions

What is the correct way to assign multiple types to a single entity in TypeScript?

Obtain the selected option's value using Angular

Inserting a pause between a trio of separate phrases

"Troubangular: Troubleshooting unexpected behavior when trying to update ngFor after setting a property

Tips for implementing a hover effect across the entire line in a line chart using Chart.js

Ways to keep information hidden from users until they actively search for it

Angular Material Textbox with drop shadow

Checking the functionality of a feature with Jasmine framework in an Angular application

Passing a service into a promise in Angular 2 using TypeScript

How can I reduce unnecessary spacing in a primeNg Dropdown (p-dropdown) filter within an Angular 5 application?

Convert TypeScript model to JSON while excluding properties with null values

Enhancing a component with injected props by including type definitions in a higher-order component

Error Encountered While Building AWS Amplify with Ionic 5 and Angular 10

encountering the issue of not being able to assign a parameter of type 'string | undefined' to a parameter of type

The value produced by the interval in Angular is not being displayed in the browser using double curly braces

The CSS scale property is not working as expected when used in a React.js application, specifically

Storing and Retrieving User Identifiers in Next.js

Is it necessary to include async/await in a method if there is already an await keyword where it is invoked?

Deserializing concrete types from an abstract list in TypeScript (serialized in JSON.NET)

The global class variable encounters an error when trying to assign the value of "socket" to it