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 yourangular.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.