dmacfarlane / angular-mentions Goto Github PK

Is it possible to customize the template shown on dropdown list?
Something like ment.io:

Cant able to invoke the function

Uncaught Error: Template parse errors:
Can't bind to 'mentionSelect' since it isn't a known property of 'input'. ("	<input type="text" name="equationTexString" [(ngModel)]="equationTexString" [mention]="searchData" [ERROR ->][mentionSelect]="mentioned" [mentionConfig]="{triggerChar:'#',maxItems:10,labelKey:'tag'}">
					<!--"): ng:///AppModule/AppComponent.html@97:105
    at syntaxError (compiler.js:485)
    at TemplateParser.parse (compiler.js:24668)
    at JitCompiler._parseTemplate (compiler.js:34621)
    at JitCompiler._compileTemplate (compiler.js:34596)
    at eval (compiler.js:34497)
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (compiler.js:34497)
    at eval (compiler.js:34367)
    at Object.then (compiler.js:474)
    at JitCompiler._compileModuleAndComponents (compiler.js:34366)

i'm trying customize the mention list. i trying to get data from array of objects but i'm failing to do so.

ts file :
  ngOnInit():void {
    this.items.push("temp Name")
    let __this = this
    this._userService.getAll(1).subscribe(res => {
      res.users.forEach(function (a,b) {
        __this.items.push(a)
      })
      console.log(__this.items)
    })
  }

.html file :

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

The array is been updated and have the data from api but the directive [mention] is bind to the old array contain values that been initialized statically at start !

Can you please update this plugin for customize text area input content, like if we want some hyperlink in the text.

So that we will implement in our website. It's important for us because Angular 1.x (https://github.com/angular-ui/ui-mention/) they give full customization. So that can you please update and let us know your valuable comments on the same.

Current mentions is not working with bootstrap 4. Any plans to support?

Also consider renaming project to ngx-mentions?

Thanks for the good work btw!

I want to code something like Slack, in the text field, you have an @ button, when you press the @ button, do exactly what type @ does, anyone have advice to achieve that ?

Thx

Hey, your module is great, I love how it works except that I'm having a hard time using labelKey to read an array of objects for the Mention list. I've tried a number of different ways of implementing, and it keeps throwing an error.

Here's my array:

userList:Array = [
{
"name": "My Name 1",
"email": "[email protected]"
},
{
"name": "My Name 2",
"email": "[email protected]"
},
{
"name": "My Name 3",
"email": "[email protected]"
}
]

and here's my template code which is throwing the error:

Any ideas? I would love to use this module but not reading the array of objects is a deal breaker. :(

How we can customize text area input content, like if we want some hyperlink in the text.

Please have a look below screen shot, look like that we need to customize same thing in our current application

Waiting for your response......

I am currently writing e2e tests with Protractor for a component which uses angular2-mentions.

However, using element.sendKeys('@') is not showing the mention list when using Chrome or Firefox. But this does work perfectly in Internet Explorer! - versions stated below

Here are the things I have tried so far:

• Using element.sendKeys(Key.chord(Key.SHIFT, "'")) to simulate exact key combo used by a human
• Using browser.actions().click(element).keyDown(Key.SHIFT).sendKeys("'").perform() to see if using the action builder helped
• Adding text before and after sendKeys to make sure the element has focus
• Changing the element type under test - Input/Text Area etc.
• Adding a 10 second sleep before and after sending the 'trigger char' to ensure I wasn't waiting improperly
• Using direct connect and Selenium Standalone server

I did then download this repository and run your own e2e Protractor tests, and they are failing to trigger the mention list too!

Versions

OS: Windows 10 (64-bit)
Chrome: v61.0.3163.100 (64-bit)
ChromeDriver: v2.33
Firefox : v56.0.2 (64-bit)
GeckoDriver: v0.19.0
Internet Explorer: v11.674.15063.0 (64-bit)
IEDriver: v3.5.1
Selenium Standalone Server: v3.6.0
Protractor: v5.2.0
Node: v7.10.1
NPM: v5.5.1

Hi. how can I position the mention-list to top placement instead of bottom? Thank you.

Hey @dmacfarlane, what do you think to implement an important feature: Once the user selects a name on the list, the component could offer an option do return a value.

Ex: My list could be:
[{name: "Erik Ramalho", value: "erikramalho1"}]

In the list, will show "Erik Ramalho". Once I click on it, the input will be populated with @erikramalho1. This feature is important because of most of the times, we need a unique id for mark users on the server side.

I need to do not just mentions with @, but also hashtags with #, is there any way to do that with this?

Hi

I just installed mentions (steps followed from the document) but i am getting the following error. Please anyone help me to resolve this..

Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/angular-mentions/mention
Error: XHR error (404 Not Found) loading http://localhost:3000/angular-mentions/mention
at XMLHttpRequest.wrapFn (http://localhost:3000/node_modules/zone.js/dist/zone.js:1166:39)
at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:425:31)
at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:192:47)
at ZoneTask.invokeTask [as invoke] (http://localhost:3000/node_modules/zone.js/dist/zone.js:499:34)
at invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:1540:14)
at XMLHttpRequest.globalZoneAwareCallback (http://localhost:3000/node_modules/zone.js/dist/zone.js:1566:17)
Error loading http://localhost:3000/angular-mentions/mention as "angular-mentions/mention" from http://localhost:3000/app/app.module.js
at XMLHttpRequest.wrapFn (http://localhost:3000/node_modules/zone.js/dist/zone.js:1166:39)
at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:425:31)
at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:192:47)
at ZoneTask.invokeTask [as invoke] (http://localhost:3000/node_modules/zone.js/dist/zone.js:499:34)
at invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:1540:14)
at XMLHttpRequest.globalZoneAwareCallback (http://localhost:3000/node_modules/zone.js/dist/zone.js:1566:17)
Error loading http://localhost:3000/angular-mentions/mention as "angular-mentions/mention" from http://localhost:3000/app/app.module.js

Meta:
selenium-standalone: 3.4.0
chromedriver: 2.38
mocha: 3.2.0,
webdriverio: 4.5.2
npm: 5.5.1
node: v8.4.0

loginSU(data) { this.withPass.click() //const dtls = Object.assign({}, loginDtls) b.pause(2000) this.phone.setValue("9833445678") b.pause(2000) this.password.setValue("123456") this.loginBtn.click() }
This is my login function which I am calling in my index.js file

it('should select' +' '+ service + ' '+' service and ask for login if owner is not logged in',()=>{ if(Homepage.loginModal.isVisible() == true){ Homepage.loginSU() b.debug() assert.equal(Homepage.prop_pic.isVisible(), true) } else{ console.log('user is already logged in') } })

Issue: When I run the test, it enters the number and password omitting digit 3 due to which the test case is filling.

Kindly help with the issue as I do not find any related issue on stack.

The suggestion menu is displayed at the bottom of the text area (observed on Chrome on Linux Mint). This is obviously very bad if the text area is big.
I think a recent change made this happen, it wasn't behaving like that last week.

This prevents the user from typing (and therefore searching by) special chars.

If array supplied to [mention] has a null value, then the page breaks.
Can we handle this issue ?

Maybe I'm doing something wrong but when I use [mentionSelect] and add a function in like this

[mentionSelect]="myFunction()"

It seems to fire when doing anything, clicking, scrolling, etc. Any idea what could be up with that?

how to use all mention can help in figure this out.

Any chance that you adapt this module to Ionic2?
Thanks!!

Hi All,
is possible to have multiple triggers for the same input field for examples (@ and #) ?
If yes, can someone point me to how this is done?
if no, any pointers on how I should go about implementing it?
Thanks

in browser working fine but when i build and install on device not working and no issue raise can any one help in solving this error
thanks,
thrideep.

im trying to add name and email from a object in the dropdown. but its not working .

There are no TypeScript files in the directory:

User /path/to/project/node_modules/angular2-mentions
$  ls -la
total 24
drwxr-xr-x    6 User  staff   204B 12 Okt 11:13 ./
drwxr-xr-x  834 User  staff    28K 12 Okt 11:13 ../
-rw-r--r--    1 User  staff   1,0K  9 Okt 18:51 LICENSE
-rw-r--r--    1 User  staff   1,4K  9 Okt 18:51 README.md
drwxr-xr-x    3 User  staff   102B 12 Okt 11:13 node_modules/
-rw-r--r--    1 User  staff   3,3K 12 Okt 11:13 package.json

This is the error i've been getting when I gave it the key to get names in the array.

Hi @dmacfarlane , can you provide a clear example to use [mentionSelect] , I can't get the selected value of the mention

I am using this for my angular 2 application which is using angular material framework.
Followed the instructions to implement this, but menu items are NOT displaying inside the dropdown which opens on giving @ character. Please find the screenshot below.

For ex : I mention many people then i using Backspace to remove some of them, how i can get the final array of mentions ?

https://github.com/dmacfarlane/angular2-mentions/blob/b13b77bab4a7ac4edc10cf93c23b47c8e77f1b49/src/mention/mention-list.component.ts#L40

Angular v5 removes support for NgTemplateOutlet#ngOutletContext in favor of ngTemplateOutletContext , which now results in a compile time error if included. Per docs, this has actually been deprecated since Angular 4, but did not result in a compile time error

angular/angular@7522987

It looks like there is just one reference to ngOutletContext on the above line. If this could be replaced with ngTemplateOutletContext , we could support both Angular 4 & 5

First of all, thanks for this library which allowed me to continue migrating my project from AngularJS to Angular by replacing Ment.io library.

I'm using newly provided [mentionListTemplate] option and doing custom complex search on my own.

Here is the code:

<textarea formControlName="content"
                  class="form-control"
                  [mention]="getSearchedItems()"
                  (searchTerm)="typedMention = $event"
                  [mentionListTemplate]="mentionItem"
                  [mentionConfig]="{mentionSelect: itemMentioned, disableSearch: true}"></textarea>

getSearchedItems() is a function which performs some complex search among array of objects using typedMention variable. disableSearch option is used to tell that I want to search by my own. With this config I don't have any results displayed even thou getSearchedItems() returns items. After investigation I found out, that items passed to [mention] are filtered by containing labelKey field (see: https://github.com/dmacfarlane/angular2-mentions/blob/master/src/mention/mention.directive.ts#L94 ).

As a workaround I added labelKey: 'type' to my [mentionConfig] object (all processed items have type field) but I think this shouldn't be required in this case.

@dmacfarlane I'd be happy to submit PR if you agree with my suggestion.

Hi,

I miss a feature in the current implementation : I don't see any possibility to format the selected item after selection and before inserting the text in the input/textarea.

I think in the angular 1 plugin, there was a "mentio-select" callback, is there plan to implement such option on this module ?

Coding in Ionic 2,

On the Web it is working

For mobile,
Both android and ios its not working

Hey @dmacfarlane it's me again :) I'm continuing rewrite of app to Angular 4 and encountered following issue:
I'm attaching [mention] to contenteditable div. A function which is formatting selected item returns HTML to style selected label nicely and disallow editing it:

onFieldSelect(item: Models.SourceField): string {
    return `<em data-id="${item.id}" contenteditable="false">${item.label}</em>`;
}

However, this HTML is being escaped when inserted to contenteditable element. Any idea how to bypass this?

I have the following code on HTML:
< input [mention]="mentionParticipants" [mentionSelect]="mentioned"/>

and in component.ts file , i have the following function for mentioned event

doDummy(){
    console.log('dummy called!');
  }


  mentioned(mention: string) {
    console.log('Mentioned: '+mention);
    //this.pushUserToMentionedList(mention);
    this.doDummy();
    return mention;
  }

but doDummy() is not detected in mentioned() function scope , as well as other variables in the file.

Could you let me know how to fix this ?

When pressing the trigger key without text overflow inside the input field, the menu positions as expected:

But when the text is longer than the input field, the menu is not positioned under the cursor anymore:

This directive is not working when accessing from a Android(Chrome). I've tried both the live demo and a local project. None of them works.

I've pressed the "@" but the dropdown list doesn't appear.

Tried several android phones with different browsers. The only browser that worked was Firefox. On iOS, it works fine.

Used in ionic

It does not load the directive

Is there any feature for multiple tag in same textbox in anugular 2.

When typing @ on the demo application, the suggestion menu doesn't show up at all (no error on console)

Using Microsoft Edge 25 (bug clearly related to the browser)

After select the user mention, how can I highlight the mention?

It is something like the facebook mention function.

The menu shows up even after removing '@' symbol (see attached screenshot).

I am trying to push new values to "items" but after it changed. The drop down menu becomes empty.

Hi,

I started using mentions and I have a question.
Is there a way to use the autocomplete with a "contains" instead of the actually "startWith"?

BR.

I uncommented the async example in the demo code and can't seem to make it behave

<h3>Minimal Async</h3>
<input [mention]="httpItems | async" [mentionConfig]="{disableSearch:true}" (searchTerm)='search($event)' class="form-control" type="text">

The behavior I see is that the options window never opens on the first search character so if I type @A nothing will appear until the next character. Hitting the backspace sees will filter the names properly to those only containing "a" and if I hit backspace again it will often leave the list up without the trigger character being present as expressed in issue 59.

polyfills.js:3 Unhandled Promise rejection: Template parse errors:
"let-" is only supported on template elements. ("
<ng-template #defaultItemTemplate [ERROR ->]let-item="item">
{{item[labelKey]}}

"): MentionListComponent@1:38
'ng-template' is not a known element:

1. If 'ng-template' is an Angular component, then verify that it is part of this module.
2. If 'ng-template' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("
   [ERROR ->]<ng-template #defaultItemTemplate let-item="item">
   {{item[labelKey]}}
   
   "): MentionListComponent@1:4
   'ng-template' is not a known element:

I have this error please can some one help me ? when I import
imports: [
HttpModule,
MentionModule,
]
Thanks

Hi @dmacfarlane,

The component is clean and exactly what I was expecting. Could update us about your plans to develop this feature?

I modified the mentions.Now it will pass entire objects to mention list.So that i'm able to get the whole data in mention-list. My object contains also the web links to specific item.I would like to format my selected item as clickable links.