Nsryjdtyk

I am building a site that allows one to search for a beer and it returns data about that beer. The user clicks the search button, and it runs the http request I have setup on a service. All displays fine. But what I am trying to do is move my search form from the displaying component, to be inside the navbar. How do I link the search form on the navbar to the viewing component?

here is the home.component where the search form currently sits(clicking search runs the "searchBeer" function below passing the beer name being searched for:

@Component({

selector: 'app-home',

templateUrl: './home.component.html',

styleUrls: ['./home.component.css']

})

export class HomeComponent implements OnInit {

constructor(private beerSearchService:BeerSearchService) { }

beerName:string;

beers:{};

selectedBeer: {};



searchBeer(beerName){

  this.beers=null;

  this.beerSearchService.searchBeer(beerName)

  .subscribe(data => console.log(this.beers=data));

  this.selectedBeer=null;

 }



 onSelect(beer): void {

 this.selectedBeer = beer;

 console.log(beer);

 }



 ngOnInit() {

 }

}

EDIT... Had wrong service before.....
beer-search.service:

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

import {HttpClient} from '@angular/common/http';



@Injectable({

providedIn: 'root'

})

export class BeerSearchService{



constructor(private http: HttpClient) { }



searchBeer(name){



let data= {

  query: `{beerSearch(query:"`+name+`"){items{id, name, style {description}, description, overallScore,

   imageUrl, abv, brewer {name, facebook, web}}}}`,

  variables:"{}",

  operationName:null

}



return this.http.post('https://api.r8.beer/v1/api/graphql/', data, {

  headers:{

     'x-api-key': '<API-KEY>'}

    });

 }

}

If I move the search bar to the navbar component, how do I call this searchBeer function?

You store the results of API call to BehaviorSubject in the service, from navbar call the method to get beers from API and in component instead of subscribing to API result, subscribe to Observable (from BehaviorSubject of BeerS - your data):

BeerSearchService

export class BeerSearchService {



  private _beers = new BehaviorSubject<Beer>(null);



  constructor(private http: HttpClient) { }



  searchBeer(beerSearch?: string) {

    // do something with beerSearch parameter

    let data = {

      query: `  {topBeers{items{id, name, style {description}, description, 

       overallScore, imageUrl, abv, brewer {name, facebook, web}}}}`,

      variables:"{}",

      operationName:null

    };



    this.http.post('https://api.r8.beer/v1/api/graphql/', data, {

      headers: {'x-api-key': '<api-key>'}

      }).subscribe(data => {

        this._beers.next(data);

      });

  }



  get beers$() {

    return this._beers.asObservable();

  }

}

navbar.ts

export class NavbarComponent implements OnInit {



   constructor(private beerSearchService: BeerSearchService) {}



   searchBeer(beerName) {

     this.beerSearchService.searchBeer(beerName);

   }

}

Component.ts

export class HomeComponent implements OnDestroy {

  beers:{};

  sub: Subscription;



  constructor(private beerSearchService: BeerSearchService) {

    this.sub = this.beerSearchService.beers$.subscribe(beers => {

     this.beers = beers;

    });

  }



  ngOnDestroy() {

    this.sub.unsubscribe();

  }

}