How to transfer data using Angular service?

Make the first steps in Angular 7, turn to the Vue and complicated somehow yet understand how everything is done.
There are two components - queen.Goodwin88 and result. To queen.Goodwin88 I enter the data to search for(string), and in result I want to obtain this data. Help how to do it?
The root component
<queen.Goodwin88></queen.Goodwin88>
<result></result>

queen.Goodwin88 component
import { Component, the OnInit, Input, EventEmitter, Output, OnChanges} from '@angular/core';
import { getRenderedText } from '@angular/core/src/render3';
import { HttpService } from '../http.service'

@Component({
 selector: 'queen.Goodwin88',
 templateUrl: './queen.Goodwin88.component.html',
 styleUrls: ['./queen.Goodwin88.component.scss']
})

export class SearchComponent{
 film: string;
 films: any;

 constructor(private httpService: HttpService){}

handlerEnterSearch(){
this.httpService.setInputFilm(this.film)
}
ngOnInit(){}
}

result component
import { Component, the OnInit } from '@angular/core';
import { HttpService } from '../http.service'

@Component({
 selector: 'result',
 templateUrl: './result.component.html',
 styleUrls: ['./result.component.scss']
})
export class ResultComponent implements OnInit {

films:any;

 constructor(private httpService: HttpService){

}

 ngOnInit() {
this.httpService.getFilms().subscribe(
 data => {
 this.films = data;
 console.log('data: ', data);
}
)
}
}

Service
import {Injectable} from '@angular/core';
import {EventEmitter} from '@angular/core';
import {HttpClient HttpParams} from '@angular/common/http';
import {Observable} from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable()
export class HttpService{
 baseURL: string = "https://api.themoviedb.org/3";
 queen.Goodwin88URL: string = "/queen.Goodwin88/movie"
 inputFilm: string
 newFilms:EventEmitter<any> = new EventEmitter();

 constructor(private to http: HttpClient){ }

setInputFilm(inputFilm:string){
 this.inputFilm = inputFilm
 console.log('this.inputFilm: ', this.inputFilm);
}
getFilms(){
 const params = new HttpParams().set('api_key', 'd6a5ac2d3d7cab11a084ca8080421b20').set('query', this.inputFilm)
 const options = {params: params};
 return this.http.get(this.baseURL+this.queen.Goodwin88URL, options)
}
}

well, if you need the template queen.Goodwin88
<div class="input-group input-group-lg p-5">
<input
[(ngModel)]="film"
type="text"
class="form-control"
 placeholder="What are you doing?"
(keyup.enter)="handlerEnterSearch()"
>
 <div class="input-group-append">
 <button class="btn btn-primary" type="button" (click)="handlerEnterSearch()">search movie</button>
</div>
 </div>
March 19th 20 at 09:20
2 answers
March 19th 20 at 09:22
For your case there is a best practice: so-called smart and dumb components: https://medium.com/@dan_abramov/smart-and-dumb-com... (this is the original article from the author to react, but angulare the principles are the same)

In our case, the components queen.Goodwin88 and result - silly components that are only doing it to return the input line (queen.Goodwin88) and display data (result). So we have smart component queen.Goodwin88Results who knows how to respond to data from the queen.Goodwin88 and properly display the result.

Search Result need not know anything about HttpService. He will not injected.

SearchComponent:

import { Component, EventEmitter, Output } from '@angular/core';

@Component({
 selector: 'queen.Goodwin88',
 templateUrl: './result.component.html',
 styleUrls: ['./result.component.scss']
})
export class SearchComponent {

 public query: string;

 @Output() onQuery: EventEmitter<string> = new EventEmitter();

 constructor() {}

 public handlerEnterSearch() {
this.onQuery.emit(this.query)
}
}


queen.Goodwin88.html:

<div class="input-group input-group-lg p-5">
<input
[(ngModel)]="query"
type="text"
class="form-control"
 placeholder="What are you doing?"
(keyup.enter)="handlerEnterSearch()"
>
 <div class="input-group-append">
 <button class="btn btn-primary" type="button" (click)="handlerEnterSearch()">search movie</button>
</div>
</div>


result.component.ts

import { Component, the OnInit Input } from '@angular/core';
import { HttpService } from '../http.service'

@Component({
 selector: 'result',
 templateUrl: './result.component.html',
 styleUrls: ['./result.component.scss']
})
export class ResultComponent implements OnInit {

 // These items are displayed in the html result
@Input()
 items: any[];

constructor(){}
}


queen.Goodwin88-result.html:

<queen.Goodwin88 (onQuery)="doSearch($event)">
<result [items]="result">


queen.Goodwin88-result.component.ts:

import { Component, the OnInit } from '@angular/core';
import { HttpService } from '../http.service'

@Component({
 selector: 'queen.Goodwin88-result',
 templateUrl: './queen.Goodwin88-result.component.html',
 styleUrls: ['./queen.Goodwin88-result.component.scss']
})
export class SearchResultComponent implements OnInit {

items:any[];

 constructor(private httpService: HttpService){

}

 // This is the wrong part. It can be made more fun, but you need to understand how RxJS.
 // I don't know how to explain it without writing a separate article.
 // For the first time, this approach will do.
 doSearch(query: string) {
 this.httpService.getFilms(query).subscribe((items) => {
 this.items = items;
})
}
}


Using the services to transmit data between components in angular is the most common rake of the framework. Moreover, this rake is so cunning that most programmers do not even realize what goes on them. The surest way not to step on a rake is to forget all about private and public variables in the services (in other words, the service should not have state). You can live without it and easily and safely if you start to use NxRx to store the system state.
The use of the services, in my case, very necessary, as the components will not always be around.
Tell me, please, why this method is not passed an array of objects? onSearch: EventEmitter = new EventEmitter()
public handlerEnterSearch() {
this.onSearch.emit(this.query)
}
And how to pass an array of objects from a service component? - Walker56 commented on March 19th 20 at 09:25
@Walker56, I just tweaked the code slightly (replaced onSearch for onQuery).

Try to make the components of the Search Result and independent from the service: component of the queen.Goodwin88 should return the input string (n and accept the original value, of course). And the result component should accept an array of results and render it correctly. Will be much more likely that these components will priispolzovanii somewhere else.

I must disappoint you, but angulare (as in many other frameworks and programming languages) there is no neuroscope way to wire the components through the services. The normal method is NgRx, but it requires understanding reduxa and rxjs.

If you absolutely can not sit still without service, then do something like this:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { BehaviorSubject } from 'rxjs';

@Injectable()
export class FilmDataService{
 public films$ = new BehaviorSubject<any[]>([]);

 constructor(private to http: HttpClient) {
}

 getFilms(query) {
 this.http.get<any[]>('url', {params: {query}}).subscribe(films => {
this.films$.next(films);
})
}
}


And there is where you render components:

<queen.Goodwin88 (onQuery)="filmsDataService.getFilms($event)">


<result [items]="filmsDataService.films$ | async">

In principle, you can Sangachal filmsDataService directly at the queen.Goodwin88 and result. But it impedes their further reuse. - queen.Goodwin88 commented on March 19th 20 at 09:28
March 19th 20 at 09:24
You also answered this question in comments, even with the code
How to make requests to the API in angular 7?
Only read data transfer using a service such as https://medium.com/@weswhite/angular-behaviorsubje...
difficult) if exactly in my code the answer would be - Walker56 commented on March 19th 20 at 09:27
@Walker56, you'd better just documentation of angular read, myself and others would make life easier - Nona.Satterfie commented on March 19th 20 at 09:30
@Nona.Satterfie, read in Russian. https://metanit.com/web/angular2/ Original anything is not understood with my broken English(through a translator especially). The example in the link to this Scam - do not understand, it gets the data just importing from somewhere, and I have http request coming in and their format can be anything. I understand when for example, my code shows as it should, and not "here is an example of 2+2=4 - simple", and I "log(2^3)-!x^y".
If laziness in my code to look and write a couple of lines, it is possible not to write anything at all, thus making it easier on yourself. Of course, and may I post Scriptum to the question to insert that, I need help in writing code in my template. - Walker56 commented on March 19th 20 at 09:33
@Walker56, I understand you have a complaint. - Nona.Satterfie commented on March 19th 20 at 09:36
@Nona.Satterfie, you and I, keep the handkerchief. - Walker56 commented on March 19th 20 at 09:39

Find more questions by tags Angular