Displaying search results in various Angular components

Question

Displaying search results in various Angular components

On my home page (homePageComponent), I have a search feature. When the user clicks on the search button, they are redirected to a different page called the search list page (searchListComponent). Within the searchListComponent, there is another component called the search card component (searchCardComponent) where all the search results are displayed. I attempted to pass the search text from the homePageComponent to the searchCardComponent using an event emitter, but unfortunately, the data is not being passed successfully. I would greatly appreciate any assistance with this issue.

Below is a snippet of sample code:

homePageComponent

HTML (Product A)

     <ng-select
              class="col-md-5 solution-list-dropdown"
              [items]="productType$ | async"
              [addTag]="true"
              [(ngModel)]="selectedSolutionId"
              bindLabel="description"
              bindValue="id"
              placeholder="Select"
              [clearable]=true
              [searchable]=true
              [dropdownPosition]="'down'"
              [ngClass]="{ 'dropdown-is-invalid': submitted && f.category.errors }">
           </ng-select>
<button class="red-button"  (click)="searchRedirection(selectedSolutionId)">
          Search
        </button>

Typescript

  @Output() searchValue = new EventEmitter<string>();

   public searchRedirection(selectedSolutionId: string) {
      this.searchValue.emit(selectedSolutionId);
      this.router.navigate(['/category/' + selectedSolutionId]);
    }

SearchListComponent

HTML

<div class="container-fluid product-card-container p-0" id="hor-divider">

    <div class="product-list">
      <app-product-card (searchValue)="onApplyEvent($event)" *ngFor="let product of products | filter:searchText | filter:filterText" [product]="product">
      </app-product-card>
    </div>

</div>

Typescript

  onApplyEvent(event: any): any {
    console.log('event : ' + event);
  }

In this scenario, I expected the console log to print "event: Product A", so that I could use it to bind the value into *ngFor. Any guidance on resolving this issue would be highly appreciated.

javascript angular typescript angular-ui-router angular-directive

Answer 1

Answer №1

If you want to pass data between two components in Angular, a good approach is to use a shared service.

The shared service can utilize a subject or eventEmitter (preferably a subject), where the home page component emits the subject and the search card component subscribes to it to receive the data.

Here's an example of how to set up the shared service:

shared.service.ts

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

@Injectable({providedIn: 'root'})

export class SharedService {

  searchSubject = new Subject<String>(); 
}

In the home component, when a solution is selected, emit it to the shared service. You can use (change) or (ngModelChange) on your list in the HTML to detect changes and emit the subject accordingly.

For example, in the home component HTML:

(ngModelChange)="onSelectSolution()"

And in the TypeScript file:

constructor(private sharedService: SharedService) { }

onSelectSolution() {
  this.sharedService.searchSubject.next(this.selectedSolutionId);
}

Then, in the search card component:

import { OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';

export class SearchCardComponent implements OnInit, OnDestroy {
  subscription: Subscription 

  constructor(private sharedService: SharedService){}

  ngOnInit() {
    this.subscription = this.sharedService.searchSubject.subscribe((mySearch: String) => {
      // Receive the search data passed from the home component
    });
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

For more information on the difference between (change) and (ngModelChange), check out this link: difference between (change) and (ngModelChange)

Answer 2

If you want to pass data between two components in Angular, a good approach is to use a shared service.

The shared service can utilize a subject or eventEmitter (preferably a subject), where the home page component emits the subject and the search card component subscribes to it to receive the data.

Here's an example of how to set up the shared service:

shared.service.ts

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

@Injectable({providedIn: 'root'})

export class SharedService {

  searchSubject = new Subject<String>(); 
}

In the home component, when a solution is selected, emit it to the shared service. You can use (change) or (ngModelChange) on your list in the HTML to detect changes and emit the subject accordingly.

For example, in the home component HTML:

(ngModelChange)="onSelectSolution()"

And in the TypeScript file:

constructor(private sharedService: SharedService) { }

onSelectSolution() {
  this.sharedService.searchSubject.next(this.selectedSolutionId);
}

Then, in the search card component:

import { OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';

export class SearchCardComponent implements OnInit, OnDestroy {
  subscription: Subscription 

  constructor(private sharedService: SharedService){}

  ngOnInit() {
    this.subscription = this.sharedService.searchSubject.subscribe((mySearch: String) => {
      // Receive the search data passed from the home component
    });
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

For more information on the difference between (change) and (ngModelChange), check out this link: difference between (change) and (ngModelChange)

Answer 3

Answer №2

When it comes to using an event emitter, the way you have declared it may not work as intended because it can only be accessed by the parent component of homePageComponent using the @Output decorator. One possible solution is to create a separate events class that can be imported into both components – one for emitting and the other for receiving. However, this approach is considered poor practice. A better alternative would be to either send the search word as a query parameter in the route or utilize a shared service with a BehaviorSubject object to store and transmit the last emitted value.

this.router.navigate(['/category'], { queryParams: { selectedSolutionId: selectedSolutionId } });

To retrieve the value in SearchListComponent, you would need to:

import { ActivatedRoute } from '@angular/router';
.....
constructor(private route: ActivatedRoute) { }
ngOnInit() {
this.route.queryParams
  .subscribe(params => {
    this.selectedSolutionId = params.selectedSolutionId;
    //Then, you can pass this.selectedSolutionId as @Input to the app-product-card component
    console.log(this.selectedSolutionId );
  });
}

Answer 4

When it comes to using an event emitter, the way you have declared it may not work as intended because it can only be accessed by the parent component of homePageComponent using the @Output decorator. One possible solution is to create a separate events class that can be imported into both components – one for emitting and the other for receiving. However, this approach is considered poor practice. A better alternative would be to either send the search word as a query parameter in the route or utilize a shared service with a BehaviorSubject object to store and transmit the last emitted value.

this.router.navigate(['/category'], { queryParams: { selectedSolutionId: selectedSolutionId } });

To retrieve the value in SearchListComponent, you would need to:

import { ActivatedRoute } from '@angular/router';
.....
constructor(private route: ActivatedRoute) { }
ngOnInit() {
this.route.queryParams
  .subscribe(params => {
    this.selectedSolutionId = params.selectedSolutionId;
    //Then, you can pass this.selectedSolutionId as @Input to the app-product-card component
    console.log(this.selectedSolutionId );
  });
}

Displaying search results in various Angular components

Answer №1

Answer №2

Similar questions

Is it possible to transform an array into a JSON file and securely store/upload it in an AWS S3 bucket?

Steer clear of encountering the "$digest already in progress" issue

What is the best way to load an index.js file within a plugin framework?

Instructions on transferring information from the app.component to its child components

When 'Interval.after' is invoked within the library, Luxon throws an error message stating "Invalid Interval."

Supply mandatory argument along with varying arguments to the function

The error TS2339 occurs because the property 'remove' is not found in the type 'Document<unknown>'

Analyzing string values in Cypress

Unable to retrieve HTML content through a Node.js server

Having difficulties fetching data from Express server to React

What is the best way to style MUI's Button component with a link to appear like a standard button?

Tips for implementing react-select types in custom component development

Obtain the Enum's Name in TypeScript as a String

Applying ngClass to a row in an Angular material table

Building applications for platform iOS is not supported on this operating system

having trouble transferring the password field in PHP to phpMyAdmin

Issue with Electron dialog.showOpenDialog() Filters malfunctioning

Is there a way for me to reach the ngFor variable within a different ngFor loop?

"What are the reasons for encountering a '404 not found' error with Django when accessing a

Transform the hue of symbols within D3-legend