title: angular 2/4 search box like google
body: <p>Hi i am new in angular 2/4.I Need to highlight the word that is been searched, while displaying the result (the key word searched will be in bold in the search results). And During searching, ‘as-you-type’ suggestion to be displayed.Like This Google <a href="https://i.stack.imgur.com/VpORs.png" rel="nofollow noreferrer">image here</a>.</p>
  
  <p><em>this is my Component.ts</em></p>
  
  <pre><code> DetailsSearch(itemcode: string): void {
  
      this.searchflag = 1;
      this.pageIndex = 1;
      this.prevScrollPosition = 0;
      if (itemcode.length &gt; 0) {
          this.searchcontent = itemcode;
  
      }
      else {
          itemcode = undefined;
          this.searchcontent = itemcode;
      }
  
  
      this._Service.DetailsSearch(this.searchcontent,  this.pageIndex).subscribe(itemsData =&gt; this.itemdetails = itemsData,
          error =&gt; {
              console.error(error);
              this.statusMessage = "Problem with the service.Please try again after sometime";
          });
  }
  </code></pre>
  
  <p><em>this is my html</em></p>
  
  <pre><code> &lt;form role="form"&gt;  
          &lt;div class="row"&gt;
              &lt;div class="form-group"&gt;
                  &lt;div class="input-group"&gt;
                      &lt;input class="form-control" type="text" name="search" placeholder="Search" required="" [(ngModel)]='searchcontent'&gt;
                      &lt;span class="input-group-btn"&gt;
                          &lt;button class="btn btn-danger ProductSearchBtn" type="button" (click)='DetailsSearch(searchcontent)'&gt;&lt;i class="glyphicon glyphicon-search" aria-hidden="true"&gt;&lt;/i&gt;&lt;span style="margin-;"&gt;Search&lt;/span&gt;&lt;/button&gt;
                      &lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt;          
          &lt;/div&gt;
      &lt;/form&gt;
  </code></pre>