TransWikia.com

Function to keep listening a service Angular 8

Stack Overflow Asked by Rob None on November 20, 2021

I have two component, I would one of them keep listening value of a variable set in a service. One component with:

    import { Component, OnInit, Input } from '@angular/core';
    import { SearchService } from '../services/search/search.service';
    
    export class ProductComponent implements OnInit {
    
    @Input() queryValue: string;
    
    ngOnInit() {
    }
    
    onClearFilter() {
      this.resetFilters();
      this._searchService.SetQueryValue(undefined);
      }
    }

And the other one with:

import { Component, OnInit, Input, NgModule } from '@angular/core';
import { SearchService } from '../services/search/search.service';

export class MmSearchComponent implements OnInit {
  queryValue: string;

  constructor(
    private _searchService: SearchService,
    private _configService: ConfigService,
    )
  {
    this.defaultSearch = SearchFilter.ALL;
  }

  ngOnInit() {
  }

  listeningValue() {
   this.queryValue = this._searchService.GetQueryValue();
  }

I would listening Value return undefined, everytime the other service set the variable. Something to listening everytime. Is it possible?

angularclientfrontendhtmljavascript

2 Answers

You have to add BehaviourSubject to your SearchService and subscribe to it changes in every component that you want:

@Injectable()
export class SearchService {
 private searchQuery: BehaviorSubject<string> = new BehaviorSubject(null);

 get searchQuery$(): Observable<string> {
  return this.searchQuery.asObservable();
 }

 updateSearchQuery(query: string): void {
   this.searchQuery.next(query);
 }
}

and use this service in your components:

export class ProductComponent implements OnInit {
    
  constructor(private searchService: SearchService){}

  @Input() queryValue: string;
    
  onClearFilter() {
    this.resetFilters();
    this.searchService.updateQuery(undefined);
   }
 }

and your second compoment:

  export class MmSearchComponent implements OnInit {
      queryValue$: Observable<string>;
    
      constructor(
        private searchService: SearchService,
        private _configService: ConfigService,
        ){ this.defaultSearch = SearchFilter.ALL; }
    
      listeningValue() {
       this.queryValue$ = this.searchService.searchQuery$;
      }
    }

Try to avoid observable subscriptions in your components if it's possible and use async pipe in a template queryValue$ | async instead. Just small advice don't use underscore for service name - take a look at Angular Code Style

Answered by Dmitry Sobolevsky on November 20, 2021

If you are looking for a change of value and an action to be taken based on the change in value, then the best way would be to use Subjects.

https://www.youtube.com/watch?v=Ft5aDAKuW5Y

https://blog.angulartraining.com/rxjs-subjects-a-tutorial-4dcce0e9637f

Answered by nXn on November 20, 2021

Add your own answers!

Ask a Question

Get help from others!

Recent Answers

Recent Questions

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP