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>

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

License

none