Noteworthy Programming Masterpiece

    angular-text-input-autocomplete
    TypeScript icon, indicating that this package has built-in type declarations

    0.5.0 • Public • Published

    angular text input autocomplete

    Build Status codecov npm version devDependency Status GitHub issues GitHub stars GitHub license

    Demo

    https://mattlewis92.github.io/angular-text-input-autocomplete/

    Table of contents

    About

    A angular 6+ directive for adding autocomplete functionality to text input elements, built around composability

    Installation

    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:

    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:

    import { Component } from '@angular/core';
    
    @Component({
      selector: 'mwl-demo-app',
      template: `
        <mwl-text-input-autocomplete-container>
          <textarea
            placeholder="Type @ to search..."
            class="form-control"
            rows="5"
            [(ngModel)]="formControlValue"
            mwlTextInputAutocomplete
            [findChoices]="findChoices"
            [getChoiceLabel]="getChoiceLabel">
          </textarea>
        </mwl-text-input-autocomplete-container>
      `
    })
    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.

    Customising the menu component UI

    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)
    import { Component } from '@angular/core';
    import { TextInputAutocompleteMenuComponent } from 'angular-text-input-autocomplete';
    
    @Component({
      template: `
        I'm a custom menu template!
        <ul 
          *ngIf="choices?.length > 0"
          #dropdownMenu
          class="dropdown-menu"
          [style.top.px]="position?.top"
          [style.left.px]="position?.left">
          <li
            *ngFor="let choice of choices; trackBy:trackById"
            [class.active]="activeChoice === choice">
            <a
              href="javascript:;"
              (click)="selectChoice.next(choice)">
              {{ choice }}
            </a>
          </li>
        </ul>
      `
    })
    class CustomMenuComponent extends TextInputAutocompleteMenuComponent {}
    1. Pass the component to the menuComponent input of the mwlTextInputAutocomplete directive
    import { Component } from '@angular/core';
    
    @Component({
      selector: 'mwl-demo-app',
      template: `
        <mwl-text-input-autocomplete-container>
          <textarea
            mwlTextInputAutocomplete
            [menuComponent]="menuComponent">
          </textarea>
        </mwl-text-input-autocomplete-container>
      `
    })
    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

    Prepare your environment

    • Install Node.js and NPM
    • Install local dev dependencies: npm install while current directory is this repo

    Development server

    Run npm start to start a development server on port 8000 with auto reload + tests.

    Testing

    Run npm test to run tests once or npm run test:watch to continually run tests.

    Release

    npm run release

    License

    MIT

    Install

    npm i angular-text-input-autocomplete

    DownloadsWeekly Downloads

    1,898

    Version

    0.5.0

    License

    MIT

    Unpacked Size

    349 kB

    Total Files

    31

    Last publish

    Collaborators

    • mattlewis92