Angular 4 - Passing string between components

Question

I am working on a movie database, I am using the MovieDb api. I currently have 20 random generated movies without an user input, so I know the api is working.

I have my HTML with an input to take in the movie name and a button to activate the method:

<button id="searchBarButton" (click)="sendRequest(MovieTitle)">Search</button>
<input id="MovieTitle" class= "searchBar" type="text" #MovieTitle>

The in my .ts for the search component.I am setting up the subscription to my service which will allow me to use the API and search through it:

sendRequest(value)
{
// Need to route the shit outta this
this._iMDBService.searchMDBMovie(this.MovieTitle).subscribe( shows => {
  this.searchedShows=shows.results;
  this.router.navigateByUrl("/details");
},
  error=>this.errorMessage=<any>error);
}

As you can see I am trying to send the movie title taken in from the user on the HTML and send it to the service below with the .ts file

@Injectable()
    export class iMDBService {
    private _iMDBURL: string = 'https://api.themoviedb.org/3/';

    constructor(private _http: HttpClient) { }

    searchMDBMovie(MovieTitle) : Observable<any>{
        return this._http.get<any>(this._iMDBURL + 'search/movie?api_key=MyWorkingApiKey&language=en-US&query=' + MovieTitle + '&page=1&include_adult=false')
        .do(data => console.log('All: ' + JSON.stringify(data)))
        .catch(this.handleError);
    }

    private handleError(err: HttpErrorResponse) {
        console.log(err.message);
        return Observable.throw(err.message);
    }
}

My question: The api is working however I need the movie title in between the api request, the HTML and .ts is not sending to the service.ts, how do I bring the titlename to the service.ts file?

Answer 1

the template variable

#MovieTitle

refers to the input element itself, not the value of it. To get the value you need to:

<button id= "searchBarButton" (click)= "sendRequest(MovieTitle.value)">Search</button>

and also use that value in your component method rather than trying to redundantly access the tempalte variable again.

simple console logging / debugging will clear these issues up much quicker.

Answer 2

Well, I guest this little corrections would make it work:

<button 
  id= "searchBarButton" 
  (click)="sendRequest(MovieTitle.value)">
  Search
</button>
<input 
  id="MovieTitle" 
  class="searchBar" 
  type="text" 
  #MovieTitle />


sendRequest(value) {
  this._iMDBService.searchMDBMovie(value).subscribe( shows => {
  ...

An suggestion to make it better for user interaction:

<button 
  id= "searchBarButton" 
  (click)="sendRequest(MovieTitle.value)">
  Search
</button>
<input 
  id="MovieTitle" 
  class="searchBar" 
  type="text" 
  #MovieTitle
  (keyup.enter)="sendRequest(MovieTitle.value)" />

The (keyup.enter) will call the sendRequest method when the user hits the Enter key when the input is focused.