title: NgbHighlight : Limit to one highlight part by line
body: <p>I'm using NgbHighlight to let the user look into a list.</p>
  
  <p>My issue is with the Highlighting of the result.
  I want to only have the first match highlighted.</p>
  
  <p>I use the very basics as described here : <a href="https://ng-bootstrap.github.io/#/components/typeahead/examples" rel="nofollow noreferrer">https://ng-bootstrap.github.io/#/components/typeahead/examples</a></p>
  
  <p>Code: <a href="https://ng-bootstrap.github.io/stackblitzes/typeahead/http/stackblitz.html" rel="nofollow noreferrer">https://ng-bootstrap.github.io/stackblitzes/typeahead/http/stackblitz.html</a></p>
  
  <p>List : <code>['ABCD AAAA ABCD', 'BBBB ABCD BBBB', 'CCCC CCCC CCCC'];</code></p>
  
  <p>Search : <code>'ABCD'</code></p>
  
  <p>The output I want : </p>
  
  <pre><code>'**ABCD** AAAA ABCD'
  'BBBB **ABCD** BBBB'
  </code></pre>
  
  <p>The output I get :</p>
  
  <pre><code>'**ABCD** AAAA **ABCD**'
  'BBBB **ABCD** BBBB'
  </code></pre>
  
  <p>What should I do to limit the highlight to the first part ?</p>
  
  <p>Example:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="form-group"&gt;
    &lt;label for="typeahead-http"&gt;Search for a wiki page:&lt;/label&gt;
    &lt;input id="typeahead-http" type="text" class="form-control" [class.is-invalid]="searchFailed" [(ngModel)]="model" [ngbTypeahead]="search" placeholder="Wikipedia search" /&gt;
    &lt;span *ngIf="searching"&gt;searching...&lt;/span&gt;
    &lt;div class="invalid-feedback" *ngIf="searchFailed"&gt;Sorry, suggestions could not be loaded.&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>TypeScript</p>
  
  <pre><code>import {Component, Injectable} from '@angular/core';
  import {HttpClient, HttpParams} from '@angular/common/http';
  import {Observable, of} from 'rxjs';
  import {catchError, debounceTime, distinctUntilChanged, map, tap, switchMap} from 'rxjs/operators';
  
  const WIKI_URL = 'https://en.wikipedia.org/w/api.php';
  const PARAMS = new HttpParams({
    fromObject: {
      action: 'opensearch',
      format: 'json',
      origin: '*'
    }
  });
  
  @Injectable()
  export class WikipediaService {
    constructor(private http: HttpClient) {}
  
    search(term: string) {
      if (term === '') {
        return of([]);
      }
  
      return this.http
        .get(WIKI_URL, {params: PARAMS.set('search', term)}).pipe(
          map(response =&gt; response[1])
        );
    }
  }
  
  @Component({
    selector: 'ngbd-typeahead-http',
    templateUrl: './typeahead-http.html',
    providers: [WikipediaService],
    styles: [`.form-control { width: 300px; display: inline; }`]
  })
  export class NgbdTypeaheadHttp {
    model: any;
    searching = false;
    searchFailed = false;
  
    constructor(private _service: WikipediaService) {}
  
    search = (text$: Observable&lt;string&gt;) =&gt;
      text$.pipe(
        debounceTime(300),
        distinctUntilChanged(),
        tap(() =&gt; this.searching = true),
        switchMap(term =&gt;
          this._service.search(term).pipe(
            tap(() =&gt; this.searchFailed = false),
            catchError(() =&gt; {
              this.searchFailed = true;
              return of([]);
            }))
        ),
        tap(() =&gt; this.searching = false)
      )
  }
  </code></pre>