title: In Angular how can I add <li> items that are in component A to a favourite list in component B?
body: <p>I am creating a movie DB, and I would like it so that when the user is on the "search-movie" component (which displays a list of movies), and then clicks on an "add to fav" button for a movie, that movie is then added to another component called "favourites"?</p>
  
  <p>I have tried using an @Output() EventEmitter but I can't seem to get this to work. I think it would also be better if it was handled from the Service.ts file, but again I am having trouble implementing this and would greatly appreciate your help!</p>
  
  <p>Inside the favourites.component.ts file I have added an empty myFavs=[]; array, ready to push fav movies into.</p>
  
  <pre><code>/* search-movie.component.ts */
  
  import { Component, OnInit } from '@angular/core';
  import { FormControl } from '@angular/forms';
  import { DataService } from '../data.service';
  
  
  @Component({
    selector: 'app-search-movie',
    templateUrl: './search-movie.component.html',
    styleUrls: ['./search-movie.component.css']
  })
  export class SearchMovieComponent implements OnInit {
  
    searchControl = new FormControl('');
    movieResults: any = [];
  
    constructor(
      private data: DataService) { }
  
    ngOnInit() {
    }
  
    /* GET request*/
    getData(event) {
      const film = event.target.value;
      this.data.searchFilm(film)
      .subscribe( (res) =&gt; {
        res = this.movieResults = res;
        console.log(res);
      });
    }
  
  }
  
  </code></pre>
  
  <pre><code>/* search-movie.component.html */
  
  &lt;div class="container"&gt;
      &lt;h1 class="is-size-1"&gt;Find your favorite movies:&lt;/h1&gt;
      &lt;form (ngSubmit)="onSubmit()"&gt;
          &lt;input 
          type="text" 
          (keyup)="getData($event)" 
          placeholder="Start typing..." 
          [formControl]="searchControl" /&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  
  
  &lt;div class="container"&gt;
  &lt;ul&gt;
      &lt;li id="list-item" *ngFor="let x of movieResults; let i = index;"&gt;
          &lt;img 
          [src]="x.Poster" 
          onerror="this.src='../assets/images/default-poster.jpg'"
          [routerLink]="['/movie/' + x.imdbID]"&gt;
          &lt;p 
          id="movie-title" 
          class="is-size-5"&gt;{{x.Title}} ({{x.Year}}) &lt;/p&gt;
          &lt;button (click)="" &gt;ADD TO FAVS&lt;/button&gt;
       &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  
  </code></pre>
  
  <pre><code>/* favourites.component.ts */
  
  import { Component, OnInit } from '@angular/core';
  import { DataService } from '../data.service';
  
  @Component({
    selector: 'app-favourites',
    templateUrl: './favourites.component.html',
    styleUrls: ['./favourites.component.css']
  })
  export class FavouritesComponent implements OnInit {
  
    myFavs = [];
  
    constructor(
      private data: DataService
    ) { }
  
    ngOnInit() {
    }
  }
  
  </code></pre>
  
  <pre><code>/* favourites.component.html */
  
  &lt;h1&gt;FAVS&lt;/h1&gt;
  
  &lt;div class="container"&gt;
  &lt;ul&gt;
      &lt;li id="list-item" *ngFor="let x of myFavs; let i = index;"&gt;
          &lt;img 
          [src]="x.Poster" 
          onerror="this.src='../assets/images/default-poster.jpg'"
          [routerLink]="['/movie/' + x.imdbID]"&gt;
          &lt;p 
          id="movie-title" 
          class="is-size-5"&gt;{{x.Title}} ({{x.Year}}) &lt;/p&gt;
       &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  
  </code></pre>