title: How to pass data from a component to a service, in order to make a new http request in angular?
body: <p>How can i pass a string value from my app.component to my service, so i can open a new URL there based on this data, but for some reason, i'm getting a &quot;Cannot read properties of undefined (reading 'toLowerCase')&quot; error, why is that?</p>
  <p>on my app.component.ts i have:</p>
  <pre><code>import { Component } from '@angular/core';
  import { searchMoviesService } from './services/buscar-todos-produtos.service';
  
  @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.scss'],
  })
  export class AppComponent {
      movie1: any;
      movie1Data: any;
  
      constructor(private searchMoviesService: searchMoviesService) { }
  
      ngOnInit() {
          this.searchMoviesService.getData().subscribe((searchProdutos: any) =&gt; {
              this.movie1 = searchProdutos.films[1];
          })
          this.searchMovie();
      }
  
      searchMovie() {
          this.searchMoviesService.searchMovie(this.movie1).subscribe((data) =&gt; {
              console.log(data);
              this.movie1Data = data;
          });
      }
  }
  </code></pre>
  <p>and my service I have:</p>
  <pre><code>import { Injectable } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  // import { buscarProdutos } from '../Models/buscarProdutos';
  import { map, Observable } from 'rxjs';
  
  @Injectable({
      providedIn: 'root',
  })
  export class searchMoviesService {
      constructor(private http: HttpClient) { }
  
      getData() {
          return this.http.get&lt;any[]&gt;('https://swapi.dev/api/planets/1/?format=json');
      }
  
      searchMovie(data: string) {
          console.log(data);
          return this.http.get&lt;string[]&gt;(data);
      }
  }
  
  </code></pre>