Coder Social home page Coder Social logo

angular-mentions's Introduction

Angular Mentions

Simple Angular mentions inspired by Ment.io.

Click here for a Demo

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/dmacfarlane/angular-mentions.git
cd angular-mentions
npm install
ng serve

Usage

Add the package as a dependency to your project using:

npm install angular-mentions

Add the module to your app.module imports:

import { MentionModule } from 'angular-mentions';
...

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

Add the [mention] directive to your input element:

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

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

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.

For Example:

<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:

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

With the following structure:

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

In this way, multiple config objects can be used:

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 becuase objects are mutable, changes to the items within the config will not be picked up unless a new mentionConfig object is created.

angular-mentions's People

Contributors

biederkdo avatar binarious avatar dependabot[bot] avatar dmacfarlane avatar falk-stefan avatar kobvel avatar kurpav avatar naimmalek avatar pdxwebdev avatar pgedzba avatar taguan avatar tom-hudson avatar vijayalakshmin1203 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.