men
@bboxx/mentions
npm i @bboxx/mentions
men

@bboxx/mentions

NPM scope for various Angular components: https://flxng.codeeve.com

by Seid M

1.1.8 (see all)License:MITTypeScript:Built-In
npm i @bboxx/mentions
Readme

Angular @Mentions Component

@bboxx/mentions

An extension of the awesome @flxng/mentions's library, with optional support to use cdk overlay for rendering overlay and few critical bug fixes like:

  1. Open Issue #33 for @flxng/mentions,
  2. choice selection doesn't work with closeMenuOnBlur=true
  3. multiple scrollbar appearance for both highlight and autocomplete components.

Flexible, lightweight, easy-to-use, without external dependencies - Mentions component for Angular.

Docs and Demo

https://flxng.codeeve.com/#/mentions

Mentions GIF

Getting Started

Installation:

$ npm i @bboxx/mentions

After importing the module the lib is ready to use:

import { MentionsModule } from '@bboxx/mentions';

@NgModule({
  imports: [MentionsModule],
  declarations: [],
})
export class DemoModule {}

Usage

Check also Docs and Demo.

@Inputs

NameDescriptionTypeDefault
textInputElementReference to the text input element.HTMLTextAreaElementRequired
menuTemplateReference to the menu template (used to display the search results).TemplateRefRequired
getChoiceLabelA function that formats the selected choice once selected. The result (label) is also used as a choice identifier (e.g. when editing choices).(choice: any) => stringRequired
triggerCharacterThe character which will trigger the search.string@
searchRegexpThe regular expression that will match the search text after the trigger character. No match will hide the menu.RegExp/^\w*$/
closeMenuOnBlurWhether to close the menu when the host textInputElement loses focus.booleanfalse
selectedChoicesPre-set choices for edit text mode, or to select/mark choices from outside the mentions component.any[][]
tagCssClassThe CSS class to add to highlighted tags.string''
useCDKOverlayBoolean to control whether overlay should be displayed using pure CSS or using @angular/cdk Overlay implementation.booleanfalse

@Outputs

NameDescriptionOutput type
searchCalled on user input after entering trigger character. Emits search term to search by.string
menuShowCalled when the choices menu is shown.void
menuHideCalled when the choices menu is hidden.void
choiceSelectedCalled when a choice is selected.ChoiceWithIndices
choiceRemovedCalled when a choice is removed.ChoiceWithIndices
selectedChoicesChangeCalled when a choice is selected, removed, or if any of the choices' indices change.ChoiceWithIndices[]
tagClickCalled when the area over a tag is clicked.TagMouseEvent
tagMouseEnterCalled when the area over a tag is moused over.TagMouseEvent
tagMouseLeaveCalled when the area over the tag has the mouse removed from it.TagMouseEvent

Basic example

<div class="relative-block-container">
  <textarea cols="42"
            rows="6"
            #textareaRef
            placeholder="Enter '@' and start typing..."
            [(ngModel)]="text"></textarea>

  <flx-mentions [textInputElement]="textareaRef"
                [menuTemplate]="menuTemplate"
                [triggerCharacter]="'@'"
                [getChoiceLabel]="getChoiceLabel"
                [searchRegexp]="'^([-&.\\w]+ *){0,3}$'"
                (search)="loadChoices($event)"
                (selectedChoicesChange)="onSelectedChoicesChange($event)"
                (menuShow)="onMenuShow()"
                (menuHide)="onMenuHide()"></flx-mentions>

  <ng-template #menuTemplate
               let-selectChoice="selectChoice">
    <ul class="flx-selectable-list">
      <li *ngFor="let user of choices"
          class="flx-selectable-list-item"
          (click)="selectChoice(user)">
        <span title="{{user.name}}">{{user.name}}</span>
      </li>
    </ul>
  </ng-template>
</div>

More examples here.

Support

All suggestions and improvements are welcome and appreciated.

License

The MIT License.

Downloads/wk

190

GitHub Stars

16

LAST COMMIT

2yrs ago

MAINTAINERS

1

CONTRIBUTORS

4

OPEN ISSUES

4

OPEN PRs

4
VersionTagPublished
1.1.8
latest
14d ago
No alternatives found
No tutorials found
Add a tutorial

Rate & Review

100
No reviews found
Be the first to rate