<repo_name>vuqueth/rob-angular-mentions<file_sep>/README.md
# Angular Mentions - Rob fork


Forked from [dmacfarlane/angular-mentions](https://github.com/dmacfarlane/angular-mentions)

Forked from [dessalines/angular-mentions](https://github.com/dessalines/angular-mentions)

Forked from [francisvgi/fvi-angular-mentions](https://github.com/francisvgi/fvi-angular-mentions)

Angular mentions inspired by [Ment.io](https://github.com/jeff-collins/ment.io).

This fork fixes several bugs that were present in older forks. The fixed bug list includes:

* Fixed issue with android keyboard causing mentions to not funciton at all on android.
* Fixed issue that prevented the mentions list from opening if the user deletes part of the entry.

Provides auto-complete suggestions for @mentions in text input fields, text areas,
and content editable fields. Not fully browser tested and comes without warranty!

git clone https://github.com/rob-moore/rob-angular-mentions.git
cd angular-mentions
ng serve

### Usage

Add the package as a dependency to your project using:

    npm install --save rob-angular-mentions

Add the CSS to your index.html:

    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

Add the module to your app.module imports:

    import { MentionModule } from 'rob-angular-mentions/mention';
    ...

    @NgModule({
        imports: [ MentionModule ],
        ...
    })

Add the `[mentions]` directive to your input element:

    <input type="text" [mentions]="mentionItems">

Where `mentionItems` is an an array of `MentionItem`:

```
mentionItems: Array<MentionItem> = [
    {
      items: {"jerry", "ben", "tom"},
      triggerChar: '@',
	  mentionSelect: formatMention
    },
    {
      items: {"happy", "sad", "trending"},
      triggerChar: '#',
    },
    {
      items: [
        {
          id: 1,
          name: "community_A"
        },
        {
          id: 2,
          name: "community_B"
        }
      ],
      labelKey: "name",
      triggerChar: "~"
    }
  ];
```

#### Configuration Options

```
export interface MentionItem {

  // The list of items to be searched on.
  items: Array<{}>;

  // the character that will trigger the menu behavior
  triggerChar: string;

  // option to specify the field in the objects to be used as the item label
  labelKey?: string;

  // option to limit the number of items shown in the pop-up menu
  maxItems?: number;

  // option to diable internal filtering. can be used to show the full list returned
  // from an async operation (or allows a custom filter function to be used - in future)
  disableSearch?: boolean;

  // template to use for rendering list items
  mentionListTemplate?: TemplateRef<any>;

  // internal use
  searchList? : MentionListComponent;
  
  // optional function to format the selected item before inserting the text
  selectMention? : any;
}
```


#### Output Events

- `(searchTerm)=""` event emitted whenever the search term changes. Can be used to trigger async search.

- `(selectedTerm)=""` event emitted whenever a term is selected.

THANKS TO DESSALINES (https://github.com/dessalines/angular-mentions) AND DMACFARLANE(https://github.com/dmacfarlane/angular-mentions).

<file_sep>/src/app/demo-simple/demo-simple.component.ts
import { Component } from '@angular/core';
import { MentionItem } from '../../mention/mention-item';
import { COMMON_NAMES } from '../common-names';
import { COMMON_TAGS } from '../common-tags';

/**
 * Demo app showing usage of the mentions directive.
 */
@Component({
  selector: 'demo-simple',
  templateUrl: './demo-simple.component.html'
})
export class DemoSimpleComponent {
  mentionItems: Array<MentionItem> = [];
  ngOnInit(): void {
    const self: this = this;

    this.mentionItems = [
      {
        items: COMMON_NAMES,
        triggerChar: '@',
      },
      {
        items: COMMON_TAGS,
        triggerChar: '#',
      },
      {
        items: COMMON_NAMES,
        triggerChar: '',
      },
      {
        items: COMMON_NAMES,
        triggerChar: ' ',
      },
      {
        items: [
          {
            id: 1,
            name: 'community_A'
          },
          {
            id: 2,
            name: 'community_B'
          }
        ],
        labelKey: 'name',
        triggerChar: '~',
      }
    ];
  }

  selectedTerm(item: any) {
    console.log(item);
  }
}
