AjxAutocomplete

This library was generated with Angular CLI version 11.0.9.

Installation

Run npm install ajx-autocomplete

Usage

First import AjxAutocompleteModule to your module:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AjxAutocompleteModule } from 'ajx-autocomplete';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule,
    AjxAutocompleteModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Then create a reactive form:

import { Component } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';

export class AppComponent {

  myForm: FormGroup;
 public employees = [
    {
      "id": 1,
      "name": "Parsifal",
      "gender": "Male"
    }, {
      "id": 2,
      "name": "Mirabel",
      "gender": "Female"
    }, {
      "id": 3,
      "name": "Verne",
      "gender": "Male"
    }, {
      "id": 4,
      "name": "Julissa",
      "gender": "Female"
    }, {
      "id": 5,
      "name": "Chaddy",
      "gender": "Male"
    }, {
      "id": 6,
      "name": "Cosme",
      "gender": "Male"
    }]

  constructor(
    private formBuilder: FormBuilder
  ) {
    this.createForm();
  }

  createForm() {
    this.myForm = this.formBuilder.group({
      keyword: ''
       });
  }
onSelected(data) {
  console.log(data);
}
}

Add seletor with static array source:

 <form [formGroup]="form">
    <ajx-autocomplete formControlName="keyword"
                      [control]="form.controls['keyword']"
                      [staticDataSource]="employees"
                      suggestionPropName="name"
                      [placeholder]="'Enter Name'"
                      (selected)="onSelected($event)"></ajx-autocomplete>
  </form>

Code scaffolding

Run ng generate component component-name --project ajx-autocomplete to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module --project ajx-autocomplete.

Note: Don't forget to add --project ajx-autocomplete or else it will be added to the default project in your angular.json file.

Build

Run ng build ajx-autocomplete to build the project. The build artifacts will be stored in the dist/ directory.

Publishing

After building your library with ng build ajx-autocomplete, go to the dist folder cd dist/ajx-autocomplete and run npm publish.

Running unit tests

Run ng test ajx-autocomplete to execute the unit tests via Karma.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.