Autocomplete using API

Angular material autocomplate component that featch data. Simply set an url to the config input and the component will generate an autocomplate component form the data that returns from the API

Installation

$ yarn add ngx-autocomplete-api

or

$ npm install ngx-autocomplete-api

Usage

Import NgxAutocompleteApiModule in your app:

import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { NgxAutocompleteApiModule } from 'ngx-autocomplete-api';
 
@NgModule({
  imports: [
    HttpClientModule,
    MatAutocompleteModule,
    FormsModule,
    ReactiveFormsModule,
    MatFormFieldModule,
    MatInputModule,
    NgxAutocompleteApiModule,
    ]
})
export class AppModule {}

app.component

import { Component } from '@angular/core';
import { HttpRequestConfig } from 'ngx-autocomplete-api';

@Component({
  selector: 'app-root',
  template: `
      <ngx-autocomplete-api [httpRequestConfig]="config" [mapDataFunction]="mapFunction"></ngx-autocomplete-api>
  `,
  styles: []
})
export class AppComponent {

  value = 'Clear me';
  config: HttpRequestConfig = {
    method: 'GET',
    dataApi: 'https://demo.dataverse.org/api/search?q=<thisIsText>',
    fieldToDisplay: 'name',
    textInUrlToReplace: '<thisIsText>'
  };
  

  mapFunction = (data) => {
    return data.data.items
  }

}

Custom view for option

<ngx-autocomplete-api [httpRequestConfig]="config" [mapDataFunction]="mapFunction">
    <div *option="let option">
        {{option.name}}
     </div>
</ngx-autocomplete-api>

Properties

| Name | Description | | ------ | ------ | | @Input('httpRequestConfig') config: HttpRequestConfig | Configuration for the http request. | | @Input() mapDataFunction: (data: any) => any | Optinal. Map functoin for pipe the http request. | | @Input() formFieldAppearance: MatFormFieldAppearance = 'standard' | Angular form field tag appearance | | inputCtrl: FormControl = new FormControl('') | Form Control for the input | | dataObserver: Observable | observer for the data stream | | inputSubscriber: Subscription | subscriber for user text input | | dataApi: string;|Route for the HTTP request| |textToReplace: string = ''|Text inside to url need to be changed accurdenly to the user search| |httpMethod: 'GET' | 'POST' = 'GET'| Which http method to use| |fieldToDisplay: string;|Field name inside the return object to display in the autocomplate|

API reference for Angular Material autocomplete

Angular material autocomplete API.

| Name | Description | | ------ | ------ | | @Input() displayWith: ((value: any) => string) | Function that maps an option's control value to its display value in the trigger. | | @Input('class') classList: string string[]; | Takes classes set on the host mat-autocomplete element and applies them to the panel inside the overlay container to allow for easy styling. | | @Input() autoActiveFirstOption: boolean | Whether the first option should be highlighted when an autocomplete panel is opened. | | @Input() disableRipple: boolean | Whether ripples are disabled.| | @Input() panelWidth: string | number | Specify the width of the autocomplete panel. Can be any CSS sizing value, otherwise it will match the width of its host.| | @Input() panelWidth: string | Whether ripples are disabled.| | @Output() closed: EventEmitter | Event that is emitted when the autocomplete panel is closed.| | @Output() opened: EventEmitter | Event that is emitted when the autocomplete panel is opened.| | @Output() optionSelected: EventEmitter | Event that is emitted whenever an option from the list is selected.| | @Output() optionActivated: EventEmitter | Event that is emitted whenever an option from the list is selected.|