title: Angular show search result in different components
body: <p>I have search feature in home page(homePageComponent) and when i click on search it will redirect to different page called search list page(searchListComponent) and i have one more component in searchListComponent itself(according to application design) which is called search card component(searchCardComponent) where i show all the search result. i was trying to send search text from homePageComponent to searchCardComponent using eventemitter but somehow the data is not passing. it would be good if somebody help on that.</p>
  
  <p>Sample code below</p>
  
  <p><em>homePageComponent</em></p>
  
  <p><em>HTML</em> (Product A)</p>
  
  <pre><code>     &lt;ng-select
                class="col-md-5 solution-list-dropdown"
                [items]="productType$ | async"
                [addTag]="true"
                [(ngModel)]="selectedSolutionId"
                bindLabel="description"
                bindValue="id"
                placeholder="Select"
                [clearable]=true
                [searchable]=true
                [dropdownPosition]="'down'"
                [ngClass]="{ 'dropdown-is-invalid': submitted &amp;&amp; f.category.errors }"&gt;
             &lt;/ng-select&gt;
  &lt;button class="red-button"  (click)="searchRedirection(selectedSolutionId)"&gt;
            Search
          &lt;/button&gt;
  </code></pre>
  
  <p>typescript</p>
  
  <pre><code>  @Output() searchValue = new EventEmitter&lt;string&gt;();
  
     public searchRedirection(selectedSolutionId: string) {
        this.searchValue.emit(selectedSolutionId);
        this.router.navigate(['/category/' + selectedSolutionId]);
      }
  </code></pre>
  
  <p><em>SearchListComponent</em></p>
  
  <p><em>HTML</em></p>
  
  <pre><code>&lt;div class="container-fluid product-card-container p-0" id="hor-divider"&gt;
  
      &lt;div class="product-list"&gt;
        &lt;app-product-card (searchValue)="onApplyEvent($event)" *ngFor="let product of products | filter:searchText | filter:filterText" [product]="product"&gt;
        &lt;/app-product-card&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p><em>Typescript</em></p>
  
  <pre><code>  onApplyEvent(event: any): any {
      console.log('event : ' + event);
    }
  </code></pre>
  
  <p>Here i'm expecting the console log to print the "event : Product A", so that i can leverage it to bind this value into *ngFor. Any help would be appreciated.</p>