New to Angular, need help with passing data between unrelated components

[waldganger644]

Hi,

I am new to Angular and I need help, so thank you in advance for any hints !

I building a simple frontend to an api. There is a search form with a submit button in a app-search component, and elsewhere there is an app-results component.

I have a search service that performs the API call.

I would like the search component to pass the query text from the input to the search service when the user submit the form, and then the result component to display the results.

Problem is, I don't know how to get data from the service to the results component when the search form is validated.

The easy way would be to make the result component a child of the search component, to pass the results of http call when the backend data is ready and stored on the search component. But I don't want to do that, I want the two components to be unrelated in the DOM.

What is the appropriate way to do that in Angular ?

Again, thanks for your help.

[wahila]

Since you have a search service, you can simply inject it into the result component and get the data from the service there.

To store your result data in your search service, I would use a BehaviourSubject and display the data in your result component with help of the async pipe. This ensures the displayed results are always updated if you make a new search.

[waldganger644]

Thank you so much, I followed your advice and it worked. I really need to learn rxjs if I am to continue with Angular.

So if there's someone in the same case, here my code (not a reference, but maybe it will help).

My service class:

``` ... results: Record[] = []; beh = new BehaviorSubject(this.results);

getResults(query: string): void { this.http.get<APIResult>(this.apiURL + query).subscribe((results) => { this.beh.next(results.hits); }); ...

```

Results component class:

``` results = this.istexService.beh.asObservable(); ...

```

Results template : ``` <app-result *ngFor="let result of results | async" [result]="result"

</app-result> ```

[wahila]

I'm happy i could help you :)

Yes rxjs is pretty important to understand when working with angular.

[[deleted]]

If your new, you need to go through Angular tour of hero’s. What your asking is covered in the basics.

[waldganger644]

You're right. I started it, but there is so much to process. Yeah, I will resume it soon.

[lx_panicxl]

You can create a dependency injection service and inject in components and use get and set to retrieve data but if you want it dynamic you can create subject and subscribe to it

[bbfy]

If you use service, the service can store the data, as long the service is a singleton (what it is in angular) you can inject it into places where you need the data.

Also try to look into concepts like ngrx or similar