A angular 6+ directive for adding autocomplete functionality to text input elements, built around composability
npm install angular-text-input-autocomplete
https://mattlewis92.github.io/angular-text-input-autocomplete/
- About
- Installation
- Documentation
- Development
- License
A angular 6+ directive for adding autocomplete functionality to text input elements, built around composability
Install through npm:
``
npm install angular-text-input-autocomplete
For older browsers you will need the keyboardevent-key-polyfill polyfill:
`
npm install keyboardevent-key-polyfill
Then include in your apps module:
`typescript
import { polyfill as keyboardEventKeyPolyfill } from 'keyboardevent-key-polyfill';
import { NgModule } from '@angular/core';
import { TextInputAutocompleteModule } from 'angular-text-input-autocomplete';
keyboardEventKeyPolyfill();
@NgModule({
imports: [TextInputAutocompleteModule]
})
export class MyModule {}
`
Finally use in one of your apps components:
`typescript
import { Component } from '@angular/core';
@Component({
selector: 'mwl-demo-app',
template:
class="form-control"
rows="5"
[(ngModel)]="formControlValue"
mwlTextInputAutocomplete
[findChoices]="findChoices"
[getChoiceLabel]="getChoiceLabel">
})
export class DemoComponent {
formControlValue = '';
findChoices(searchText: string) {
return ['John', 'Jane', 'Jonny'].filter(item =>
item.toLowerCase().includes(searchText.toLowerCase())
);
}
getChoiceLabel(choice: string) {
return @${choice} ;`
}
}
You may also find it useful to view the demo source.
By default the component works out of the box with bootstrap, but if you're using a different UI framework then you can customise the menu component that gets displayed.
1. Create a custom menu component and add it to your components NgModule declarations (If you're not using ivy then you will need to add it to entryComponents as well)
`typescript
import { Component } from '@angular/core';
import { TextInputAutocompleteMenuComponent } from 'angular-text-input-autocomplete';
@Component({
template:
I'm a custom menu template!
})
class CustomMenuComponent extends TextInputAutocompleteMenuComponent {}
2. Pass the component to the
input of the mwlTextInputAutocomplete directive`typescript
import { Component } from '@angular/core';@Component({
selector: 'mwl-demo-app',
template:
})
export class DemoComponent {
menuComponent = CustomMenuComponent;
}
Documentation
All documentation is auto-generated from the source via compodoc and can be viewed here:
https://mattlewis92.github.io/angular-text-input-autocomplete/docs/
Related
angular-text-input-highlight - a component for highlighting parts of a textarea
Development
$3
- Install Node.js and NPM
- Install local dev dependencies:
while current directory is this repo$3
Run
npm start to start a development server on port 8000 with auto reload + tests.$3
Run
npm test to run tests once or npm run test:watch to continually run tests.$3
`bash
npm run release
``MIT