CODEWITHSUNDEEP
angulartypescriptobservable
Justin Dunlap
Justin Dunlap

Reputation: 129

Updating component values when service value changes Angular 8

I have an Angular 8 project with two sibling components that both use a service to update restaurant data. Essentially, I have one component showing a list of restaurants grabbed from an api, and a sibling component that can filter the restaurants that get shown by the first component. I am using a service to get and set the list of restaurants, but my code is currently not populating any data on load. Here's the code for my components and service

Resturant.service.ts

@Injectable()
export class EatstreetService {

  radius;
  address;
  public restaurants: BehaviorSubject<any> = new BehaviorSubject<any>(null);

  constructor(private httpClient: HttpClient) { }

  public setRestaurant(){
    let params = new HttpParams();
    params = params.append('method', 'delivery');
    params = params.append('pickup-radius', this.radius);
    params = params.append('street-address', this.address);
    params = params.append('access-token', this.token)
    this.restaurants.next(this.httpClient.get(`https://api.com/publicapi/v1/restaurant/search`, {params}))
  }


  public getRestaurant(): Observable<any>{

    return this.restaurants.asObservable();
  }
}

ResturantsFilter.component.ts

export class LocationComponent implements OnInit {
  restaurants;
  radius;
  address;

  constructor(private eatstreetService: EatstreetService) { }

  setRestaurants() {
    this.eatstreetService.setRestaurant()
  }

  getRestaurants() {
    this.eatstreetService.getRestaurant().subscribe((data) => {
      console.log(data['restaurants']);
      this.restaurants = data['restaurants'];
    })
  }

  onSelect(): void {
    this.setRestaurants()
  }

  ngOnInit() {
    this.setRestaurants()
    this.getRestaurants()
  }

}

ResturantsList.component.ts

export class CardsComponent implements OnInit {
  restaurants;

  constructor(private eatstreetService: EatstreetService) { }

  getRestaurants() {
    this.eatstreetService.getRestaurant().subscribe((data) => {
      console.log(data['restaurants']);
      this.restaurants = data['restaurants'];
    })
  }
  setRestaurants() {
    this.eatstreetService.setRestaurant()
  }

  ngOnInit() {
    this.getRestaurants()
  }
}

I have found many related questions about this, but none of the solutions are working for me.

Upvotes: 0

Views: 1089

Answers (1)

Bilel-Zheni
Bilel-Zheni

Reputation: 1312

You need to emit the value through your BehaviorSubject after your http get response :

 @Injectable()
    export class EatstreetService {

      radius;
      address;
      public restaurants: = new ReplaySubject(1);

      constructor(private httpClient: HttpClient) { }

      public setRestaurant(){
        let params = new HttpParams();
        params = params.append('method', 'delivery');
        params = params.append('pickup-radius', this.radius);
        params = params.append('street-address', this.address);
        params = params.append('access-token', this.token)
        this.httpClient.get(`https://api.com/publicapi/v1/restaurant/search`, {params})
                     .subscribe(resp => this.restaurants.next(resp) ) ;

      }


      public getRestaurant(): Observable<any>{

        return this.restaurants.asObservable();
      }
    }

Upvotes: 2

Related Questions