Ng select - quan1997ap/angular-app-note GitHub Wiki

  [typeahead]="input$" là observerable khi user search

<ng-select 
  [items]="photosBuffer"
  [virtualScroll]="true" 
  [loading]="loading" 
  bindLabel="title" 
  bindValue="thumbnailUrl"
  placeholder="Select photo" 
  [typeahead]="input$"
  (scrollToEnd)="fetchMore(select.filterValue)"
  #select>
  <ng-template ng-option-tmp let-item="item" let-index="index" let-search="searchTerm">
    <b>{{index}} </b><span [ngOptionHighlight]="search">{{item.title}}</span>
  </ng-template>
</ng-select>

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Subject, Observable, of, concat } from 'rxjs';
import { distinctUntilChanged, debounceTime, switchMap, tap, catchError, filter, map } from 'rxjs/operators'

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  photos = [];
  photosBuffer = [];
  bufferSize = 50;
  loading = false;
  input$ = new Subject<string>();

  constructor(private http: HttpClient) { }

  ngOnInit() {
    this.http.get<any[]>('https://jsonplaceholder.typicode.com/photos').subscribe(photos => {
      this.photos = photos;
    });

    this.onSearch();
  }

  fetchMore(term) {
    const len = this.photosBuffer.length;
    const more = this.photos.filter(x => x.title.includes(term)).slice(len, this.bufferSize + len);
    this.loading = true;
    setTimeout(() => {
      this.loading = false;
      this.photosBuffer = this.photosBuffer.concat(more);
    }, 200)
  }

  onSearch() {
    this.input$.pipe(
      debounceTime(200),
      distinctUntilChanged(),
      switchMap(term => this.fakeService(term))
    )
      .subscribe(data => {
        this.photosBuffer = data.slice(0, this.bufferSize);
      })
  }


  private fakeService(term) {
    return this.http.get<any[]>('https://jsonplaceholder.typicode.com/photos')
      .pipe(map(data => data.filter((x: { title: string }) => x.title.includes(term))))
  }
}

<ng-select
    [multiple]="true"
    [items]="serverSideFilterItems"
    [(ngModel)]="selectedPeople"
    placeholder="Select people"
    bindLabel="name"
    bindValue="name"
    [typeahead]="peopleTypeahead">
    <ng-template ng-typetosearch-tmp>
        <div class="ng-option disabled">
            Start typing...
        </div>
    </ng-template>
    <ng-template ng-notfound-tmp let-searchTerm="searchTerm">
        <div class="ng-option disabled">
            No data found for "{{searchTerm}}"
        </div>
    </ng-template>
    <ng-template ng-loadingtext-tmp let-searchTerm="searchTerm">
        <div class="ng-option disabled">
            Fetching data for "{{searchTerm}}"
        </div>
    </ng-template>
</ng-select>

<ng-select
    [multiple]="true"
    [items]="people"
    [(ngModel)]="selectedPeople"
    placeholder="Select people"
    bindLabel="name"
    bindValue="name">
    <ng-template ng-header-tmp>
        <button (click)="selectAll()" class="btn btn-sm btn-secondary">Select all</button>
        <button (click)="unselectAll()" class="btn btn-sm btn-secondary">Unselect all</button>
    </ng-template>
    <ng-template ng-footer-tmp>
        Selected count: {{selectedPeople.length}}
    </ng-template>
</ng-select>

<ng-select
    [items]="days"
    [multiple]="true"
    bindLabel="name"
    bindValue="order"
    placeholder="Select days"
    [(ngModel)]="selectedDays">
    <ng-template ng-multi-label-tmp let-items="items" let-clear="clear">
        <div class="ng-value" *ngFor="let item of items | slice:0:4">
            <span class="ng-value-label">{{item.name}}</span>
            <span class="ng-value-icon right" (click)="clear(item)" aria-hidden="true">×</span>
        </div>
        <div class="ng-value" *ngIf="items.length > 4">
            <span class="ng-value-label">{{items.length - 4}} more...</span>
        </div>
    </ng-template>
</ng-select>