title: Angular 5 - How to reload a component after it is initialized
body: <p>I have a search feature in the application. When the user clicks the search button the data is captured in <code>[(ngModel)]</code> and passed to a service. The URL is redirected to the HTML of the <code>SearchComponent</code>.
  This service is injected into the <code>SearchComponent</code> and the data is displayed.</p>
  <p>When the user enters a new search term, I want to refresh the existing <code>SearchComponent</code>. What is the proper way to do this?</p>
  <h2>search.component.ts</h2>
  <pre class="lang-ts prettyprint-override"><code>import { Component, OnInit } from '@angular/core';
  import { DataService } from '../service/data.service';
  
  @Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.css']
  })
  export class SearchComponent implements OnInit {
  
  userInput : string; 
  constructor(private data : DataService) { }
  
  ngOnInit(){
      this.search();
  }
  
  search(){
  
      this.userInput = this.data.searchData;
      console.log('in search init  ' + this.userInput);
      this.data.searchData = &quot;&quot;;
   }
  }
  </code></pre>
  <h2>app.component.ts</h2>
  <pre class="lang-ts prettyprint-override"><code>import { Component } from '@angular/core';
  import { DataService } from './service/data.service';
  
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    constructor(private data : DataService){};
     
    title = 'app';
    searchInput: string;
    
    searchButtonclick(){
      console.log('search button clicked   '  + (this.searchInput));
      this.data.searchData = this.searchInput
      this.searchInput = &quot;&quot;;
    }
  
  }
  </code></pre>
  <h2>app.component.html</h2>
  <pre class="lang-html prettyprint-override"><code>&lt;form&gt;
    &lt;input type=&quot;text&quot; placeholder=&quot;Search&quot; [(ngModel)]=&quot;searchInput&quot; name=&quot;inputfield&quot;&gt;
    &lt;a routerLink=&quot;/search&quot;&gt;
      &lt;button (click)=&quot;searchButtonclick()&quot;&gt;Search&lt;/button&gt;
    &lt;/a&gt;
  &lt;/form&gt;
  </code></pre>