Ngx-mat-class-auto-complete NPM

NgxMatClassAutoComplete

Installation

Use the package manager npm to install NgxClassAutoComplete.

npm i ngx-mat-class-auto-complete

Usage

import { NgxMatClassAutoCompleteModule } from 'ngx-mat-class-auto-complete';

@NgModule({
  declarations: [],
  imports: [NgxMatClassAutoCompleteModule],
})
export class ExampleModule {}

API

to start the usage implement the NgxAutoCompleteProvider interface to your service connected to the backend or to a random class that will provide the class information to the component

export interface NgxAutoCompleteProvider<T> {
  findOne: (value?: any) => Promise<T>;
  findBySearch: (value?: string) => Promise<T[]>;
}

example:

import { HttpClient, HttpParams } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { City } from '../../../shared/models/city.model';
import { NgxAutoCompleteProvider } from 'ngx-mat-class-auto-complete';

@Injectable({ providedIn: 'root' })
export class CityService implements NgxAutoCompleteProvider<City>{
  constructor(private http: HttpClient) {}
  findOne(id: number): Promise<City> {
    return this.http.get<City>('city/' + id).toPromise();
  }
  findBySearch(value?: string): Promise<City[]> {
    let params = new HttpParams();
    if (value) params = params.set('search', value);
    return this.http.get<City[]>('city/filter', { params }).toPromise();
  }
}

you can even create a provider statically as shown under.

provider: NgxAutoCompleteProvider<City> = {
    findOne: () =>
      Promise.resolve({
        apiId: '1',
        uf: 'mg',
        name: 'Lancheiras',
        id: 1,
        createdAt: '',
        updatedAt: '',
      } as City),
    findBySearch: () =>
      Promise.resolve([
        {
          apiId: '1',
          uf: 'mg',
          name: 'Lancheiras',
          id: 1,
          createdAt: '',
          updatedAt: '',
        } as City,
      ]),
  };

or even with static values

provider: NgxAutoCompleteProvider<City> = {
    findOne: () => {
      return {
        apiId: '1',
        uf: 'mg',
        name: 'Lancheiras',
        id: 1,
        createdAt: '',
        updatedAt: '',
      } as City;
    },
    findBySearch: () => [
      {
        apiId: '1',
        uf: 'mg',
        name: 'Lancheiras',
        id: 1,
        createdAt: '',
        updatedAt: '',
      } as City,
    ],
  };

inject the provider in the component that will consume it as public so the html can access it

 constructor(private _fb: FormBuilder, public cityService: CityService) {
    this.loginForm = this._fb.group({
      email: ['', [Validators.email, Validators.required]],
      city: [2],
      password: ['', [Validators.required]],
    });
  }

implements a display function who can act as a transformer from the source object to the string result

 displayFn = (value: City) => {
    return value.name + '/' + value.uf;
  };

finnally call it directly in you html file or template

<ngx-class-auto-complete
  [displayFn]="displayFn"
  formControlName="city"
  label="User City"
  value="id"
  [debounceTime]="300"
  [service]="cityService"
></ngx-class-auto-complete>