how can I pass the data from one component to another?

I'm trying to pass data from a parent component to a child component. The movie search component uses a service function to gather data, then processes the data so that it's just title and id information. I want to pass it to the details component so that I can make it viewable/clickable. I am getting these bullet points instead of the actual data.



Below is the component that performs the search and processes the results into an object, as seen in the console log of the screenshot above.

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { MovieResult } from '../movie-result';
import { MovieQueryService } from '../services/movie-query.service';
import { map } from 'rxjs';

@Component({
selector: 'app-movie-search',
templateUrl: './movie-search.component.html',
styleUrls: ['./movie-search.component.css']
})
export class MovieSearchComponent {
movies: any = [];


constructor(private queryService: MovieQueryService){}

search(query: string)
{
this.queryService.getData(query).subscribe((movies:any) => {
this.processResults(movies.results) })
}

processResults(movies: any)
{


movies.forEach((element: any) => {
this.movies.push([element.title, element.id])
console.log(this.movies)});

}


ngOnInIt() : void
{

}
}


Below are the app component HTML files movie-search.component.html

<div id="search-component">
<label for="search-box">Movie Search</label>
<input #searchBox id="search-box" (keyup.enter)="search(searchBox.value)" />


</div>

<app-movie-details [data]="movies"></app-movie-details>


movie-search.component.html

<li *ngFor="let data of data">
<p>{{data.title}}</p>
<p>{{data.id}}</p>
</li>

Continue reading...