how to set up for multi mention config (@ & #) for async call for both of them

[MahnazSheikhi]

trafficstars

Hi,

I need to set up for multi mention config (@ & #) for async call for both of them.

this is my html code :

<textarea matInput #description type="text" [formControl]="demandDescription" [mentionConfig]="mentionConfig" [mention]="httpItems | async" (searchTerm)='search($event)' class="form-control" matTextareaAutosize matAutosizeMinRows="1" matAutosizeMaxRows="15"></textarea>

and this is ts config

mentionConfig: MentionConfig = { mentions: [ { triggerChar: "#" }, { triggerChar: "@" } ] };

but not working and works only for '@' that worked this item without adding the 'mentionConfig.'

i found out that in asynchronous mode it uses its default configuration (private DEFAULT_CONFIG: MentionConfig).

But I need to send two triggerChars ( @ & #) in asynchronous mode. Is this possible?

I use angular 5

Thank you if you guide me

[josiahkosgei]

@MahnazSheikhi , You can do something like this.

[mentionConfig]="mentionConfig$ | async" in your html declare mentionConfig$ = new BehaviorSubject<any>({}); and in somewhere in your code do this const mentionConfig = { mentions: [ { items: [yourdata from store or service], triggerChar: '@' }, { items: [yourdata from store or service], triggerChar: '#' }] }; this.mentionConfig$.next(mentionConfig);

[MahnazSheikhi]

@Jossaya I do not know how to pass async service to 'items' in mentionConfig .

The source code for my services are as follows: getAccountItems(term): Promise<any[]> { ... }

and

getTagItems(term): Promise<any[]> { ... }

and my mentionConfig is :

mentionConfig: MentionConfig = { mentions: [ { items:this.getTagItems, labelKey: 'name', triggerChar: '#' }, { items: this.getAccountItems, labelKey: 'name', triggerChar: '@' } ] };

but get error :

error TS2322: Type '{ mentions: { items: (term: any) => Promise<any[]>; labelKey: string; triggerChar: string; }[]; }' is not assignable to type 'MentionConfig'. Types of property 'mentions' are incompatible.

Is it possible to pass async service to 'items' in mentionConfig ? If yes, how should I do it?

[ymchun]

@dmacfarlane any update?

[aeslinger0]

I tried @Jossaya's method, but I couldn't get it to work. Maybe that worked with an eariler version? Anyway, I got this working for 1.2.0, but it's kind of a hack. I had to pass in the results to [mention]="results" AND also update the items array on the trigger-specific config because the default config with an empty items array was overwriting my results.

<div [mention]="mentionResults" [mentionConfig]="mentionConfig" ... >

Also, unrelated but it might help someone, because I was using a complex nested object and a custom template, I had to explicitly set labelKey to null so the default config wouldn't filter out my complex object. I had no idea why the menu was refusing to appear. I had to step through the code to find these things. Not the best experience. I'd be nice if there was a debug mode that gave you a reason.

[josiahkosgei]

With [email protected] still works

<input matInput autocomplete="off" class="form-control" type="text" formControlName="variableName"  [mentionConfig]="mentionConfig$ | async">

but

<div [mention]="mentionResults" [mentionConfig]="mentionConfig" ... >

will not work. You can add your list mentionResults as the items property of Mentions which is extended by MentionConfig interface

    const mentionConfig = {
      mentions: [
        {
          items: this._prefixes,
          triggerChar: '@'
        },
        {
          items: this._prefixes,
          triggerChar: '#'
        }]
    };

[aeslinger0]

@Jossaya, I tried your method again and it worked. I thought it was unrelated, but I think the key to get it working for me was to set labelKey to null instead of omitting it since I'm using a custom template and a complex object. Otherwise every item was getting filtered out and the menu wasn't showing at all!

So, although the way I did it did work (passing a new array to [mention] caused it to reread the updated 'items' arrays in the config), your way seems much safer. Thanks.