How to use limitTo in typehaead Angular 4?

Question

How can i limit the number the typeahead results to 5 or something in Angular 4 ? I have attached the official plunker link here. I'm not able to use |limitTo

http://embed.plnkr.co/gV6kMSRlogjBKnh3JHU3/

This is the template

<section class="col-sm-12">
    <div class="search-results style-3">
      <input type="text" [value]="query"
        ngxTypeahead
        [taUrl]="url"
        [taParams]="params"
        (taSelected)="handleResultSelected($event)"
      >
    </div>
  </section>

This is ts file

export class AppComponent {

  title = 'This is Angular TypeAhead v' + systemConfig.map['ngx-typeahead'].split('@')[1].split('/')[0];

  public url = 'http://suggestqueries.google.com/complete/search';
  public params = {
    hl: 'en',
    ds: 'yt',
    xhr: 't',
    client: 'youtube'
  };
  public query = '';

  handleResultSelected (result) {
    this.query = result;
  }

  generateWord() {
    return chance.word();
  }
}

@sajeetharan where was it asked before? can you send the duplicate question? — Ramya S, Feb 11 '18 at 06:04

score 11 · Accepted Answer · answered Feb 11 '18 at 05:27

In Angular, there is no limitTo filter, its called SlicePipe.

Use | slice:0:3 instead of limitTo

<input type="text" ngxTypeahead [value]="query3" [taList]="staticList | slice:0:3" (taSelected)="handleStaticResultSelected($event)">

Updated plnkr: https://plnkr.co/edit/wqTHY2rHknXHF412BELQ?p=preview

How to use limitTo in typehaead Angular 4?

1 Answers1