# @angular2plus/angular-mentions

> Angular mentions for text fields.

Latest version **1.3.5** (published 2020-07-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install @angular2plus/angular-mentions
pnpm add @angular2plus/angular-mentions
yarn add @angular2plus/angular-mentions
bun add @angular2plus/angular-mentions
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.3.5 |
| Published | 2020-07-17 |
| First published | 2020-01-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 43.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Isfand Yar Khan |
| Maintainers | isfandyarkhan |
| Keywords | angular, mention, autocomplete, mentions, tagging, tags |

## Links

- npm: https://www.npmjs.com/package/@angular2plus/angular-mentions
- Repository: https://github.com/isfandkhan/angular-mentions
- Homepage: https://github.com/isfandkhan/angular-mentions#readme
- Issues: https://github.com/isfandkhan/angular-mentions/issues
- npm.io page: https://npm.io/package/@angular2plus/angular-mentions

## Recent versions

- 1.3.5 (latest) — 2020-07-17
- 1.3.4 — 2020-07-17
- 1.3.3 — 2020-07-17
- 1.3.2 — 2020-07-17
- 1.3.1 — 2020-07-17
- 1.3.0 — 2020-01-13
- 1.2.9 — 2020-01-13
- 1.2.8 — 2020-01-13
- 1.2.6 — 2020-01-13
- 1.2.4 — 2020-01-13
- 1.2.2 — 2020-01-13
- 1.2.1 — 2020-01-13
- 1.2.0 — 2020-01-12

## README

# Angular Mentions

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

Special thanks to [angular-mentions](https://github.com/dmacfarlane/angular-mentions).

[Click here for a Demo](http://isfandkhan.github.io/angular-mentions/)

Provides auto-complete suggestions for @mentions in text input fields, text areas,
and content editable fields.

To install and start the demo application:

    git clone https://github.com/isfandkhan/angular-mentions.git
    cd angular-mentions
    npm install
    ng serve

### Usage

Add the package as a dependency to your project using:

npm i @angular2plus/angular-mentions

Add the module to your app.module imports:

```typescript
import { MentionModule } from '@angular2plus/angular-mentions';
...

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

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

```html
<input type="text" [mention]="items">
```

Where `items` is a string array of the items to suggest. For example:

```typescript
items: string[] = ["Noah", "Liam", "Mason", "Jacob", ...
```

#### Configuration Options

The following optional configuration items can be used.

| Option              | Default  | Description
|                     |          |
| items               |          | An array of strings or objects to suggest.
| triggerChar         | @        | The character that will trigger the menu behavior.
| labelKey            | label    | The field to be used as the item label (when the items are objects).
| disableSort         | false    | Disable sorting of suggested items.
| disableSearch       | false    | Disable internal filtering (only useful if async search is used).
| dropUp              | false    | Show the menu above the cursor instead of below.
| maxItems            | ∞        | Limit the number of items shown in the text. The default is no limit.
| mentionSelect       |          | A function to format the selected item before inserting the text.
| allowSpace          | false    | Allow spaces while mentioning.
| returnTrigger       | false    | Include the trigger char in the searchTerm event.
| mentionListTemplate | null     | Include the trigger char in the searchTerm event.

For Example: 

```html
<input type="text" [mention]="items" [mentionConfig]="{triggerChar:'#',maxItems:10,labelKey:'name'}">
```

#### Output Events

The following output events can be used.

| Output                                      | Description
|                                             |
| `@Output() searchTerm EventEmitter<string>` | Event that is emitted whenever the search term changes. Can be used to trigger async search.
| `@Output() opened EventEmitter<void>`       | Event that is emitted when the mentions panel is opened.
| `@Output() closed EventEmitter<void>`       | Event that is emitted when the mentions panel is closed.

### Alternative Usage

The component can also be used by only specifying the mentionConfig object:

```html
<input type="text" [mentionConfig]="mentionConfig">
```

With the following structure:

```javascript
let mentionConfig = {
    items: [ "Noah", "Liam", "Mason", "Jacob", ... ],
    triggerChar: "@",
    ...
}
```

In this way, multiple config objects can be used:

```typescript
let mentionConfig = {
    mentions: [
        {
            items: [ "Noah", "Liam", "Mason", "Jacob", ... ],
            triggerChar: '@'
        },
        {
            items: [ "Red", "Yellow", "Green", ... ],
            triggerChar: '#'
        },
    }]
}
```
This allows different lists and trigger characters to be configured.

Note that because objects are mutable, changes to the items within the config will not be picked up unless a new mentionConfig object is created.

### CUSTOM Template

Custom HTML can also be injected, bypassing the default HTML template provided by @angular2plus/angular-mentions.

```typescript
let mentionConfig = {
    items: [ "Noah", "Liam", "Mason", "Jacob", ...],
    data: [
      { imgUrl: 'Some Image URL' },
      { imgUrl: 'Some Image URL' },
      { imgUrl: 'Some Image URL' },
      ...
    ],
    triggerChar: "@",
    ...
}
```

```html

<ng-template #mentionList let-item="item">
  
  <img [src]="item.data.imgUrl">
  {{ item.label }}
  
</ng-template>

<input type="text" [mentionListTemplate]="mentionList" [mentionConfig]="mentionConfig">

```

---
_Source: https://npm.io/package/@angular2plus/angular-mentions · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._