title: Search bar in Angular 6+ to search API
body: <p>I created a search bar in Angular, I'm using the sidebar nav component.  I want the search box to be in the top header and then the results to show on a result component which will then be a separate page.</p>
  
  <pre><code>&lt;mat-sidenav-container class="sidenav-container"&gt;
    &lt;mat-sidenav #drawer class="sidenav" fixedInViewport="true"
        [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
        [mode]="(isHandset$ | async) ? 'over' : 'side'"
        [opened]="!(isHandset$ | async)"&gt;
     &lt;img src="{{ logo }}" alt="Logo"&gt;
     &lt;span class="menuLabel"&gt;Menu&lt;/span&gt;
      &lt;mat-nav-list&gt;
        &lt;ul&gt;
        &lt;li class="nav-item"&gt;&lt;a mat-list-item class="nav-link" routerLink="home" routerLinkActive="active"&gt;&lt;i class="fas fa-home"&gt;&lt;/i&gt; Home&lt;/a&gt;&lt;/li&gt;
        &lt;li class="nav-item"&gt;&lt;a mat-list-item class="nav-link" routerLink="resources" routerLinkActive="active"&gt;&lt;i class="fas fa-archive"&gt;&lt;/i&gt; Resources&lt;/a&gt;&lt;/li&gt;
        &lt;li class="nav-item"&gt;&lt;a mat-list-item class="nav-link" href="#"&gt;&lt;i class="fas fa-users"&gt;&lt;/i&gt; Admin&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;/mat-nav-list&gt;
    &lt;/mat-sidenav&gt;
    &lt;mat-sidenav-content&gt;
      &lt;mat-toolbar&gt;
        &lt;button
          type="button"
          aria-label="Toggle sidenav"
          mat-icon-button
          (click)="drawer.toggle()"
          *ngIf="isHandset$ | async"&gt;
          &lt;mat-icon aria-label="Side nav toggle icon"&gt;menu&lt;/mat-icon&gt;
        &lt;/button&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-sm-4"&gt;&lt;app-search&gt;&lt;/app-search&gt;&lt;/div&gt;
          &lt;div class="col-sm-4"&gt;&lt;/div&gt;
          &lt;div class="col-sm-4"&gt;&lt;app-user&gt;&lt;/app-user&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/mat-toolbar&gt;
      &lt;ng-content&gt;
      &lt;/ng-content&gt;
    &lt;/mat-sidenav-content&gt;
  &lt;/mat-sidenav-container&gt;
  </code></pre>
  
  <p>The search component:</p>
  
  <pre><code>&lt;div class="results"&gt;
  &lt;mat-form-field class="example-full-width"&gt;
        &lt;input  matInput placeholder="Search" [(ngModel)]="searchInput" name="search"&gt;
      &lt;/mat-form-field&gt;
      &lt;button mat-button (click)="onSearch(searchInput)" type="button"&gt;&lt;i class="fas fa-arrow-right"&gt;&lt;/i&gt;&lt;/button&gt;
  </code></pre>
  
  <p>This will get results if they are on the same component but I can't figure out how to get them to a different component.</p>
  
  <pre><code>@Component({
    selector: 'app-search',
    templateUrl: './search.component.html',
    styleUrls: ['./search.component.css']
  })
  export class SearchComponent implements OnInit {
    query: any;
  
    searchInput: '';
    searchReturned = false;
  
    handleSuccess(data) {
      this.query = data.results;
      this.searchReturned = true;
  
    }
  
    constructor( private searchService: FetchDataService ) {}
  
  
  
    ngOnInit() {
    }
  
  
    onSearch(query: string) {
      return this.searchService.getSearch(query).subscribe(
        data =&gt; this.handleSuccess(data),
        error =&gt; console.log(error),
      );
    }
  }
  </code></pre>