How to use the directive with async API results?

[konstantinosftw]

trafficstars

Hello, I've read all the issues here (including this answer) and experimented for quite a while, but I still haven't managed to populate the mention-menu with the results from an API call. I concat() the new items array in the items array within mentionConfig, but there is no change detection happening and the menu does not live update the updated array.

A solution or working example will be much appreciated.

[dmacfarlane]

Did you look at the async demo in the demo-app?

[konstantinosftw]

I did, though it looked more convoluted than my coding skills allow me and I thought (or better wished) that it might have been dated. I couldn't even manage to import debounceTime as rxjs says that there is no such thing to export. But thank you, I will try a few more hours to make it work for both my "@" and "#" triggers.

[konstantinosftw]

Hello @dmacfarlane and thanks for your direction. I managed to return the async data, but I can't load them in the mentionListTemplate. I can load them in another component with *ngFor, but I'd like to find a way to use mentionListTemplate, which is working fine with local data.

I use two triggers and my code looks like this:

// HTML component

<input [mentionConfig]="mentionConfig" [mentionListTemplate]="mentionTemplate" [mention]="httpItems | async" (searchTerm)="mentionSearch($event)">

<ng-template #mentionTemplate let-item="item">
    <div *ngIf="item.mention">
        <!-- some spans -->
    </div>
    <div *ngIf="item.hashtag">
        <!-- some other spans -->
    </div>
</ng-template>



// TS component

mentionConfig = {
    mentions: [
      {
        labelKey: null,
        triggerChar: "@",
        returnTrigger: true,
        disableSearch: true,
        dropUp: true,
        maxItems: 5,
      },
      {
        labelKey: null,
        disableSort: true,
        triggerChar: "#",
        returnTrigger: true,
        disableSearch: true,
        dropUp: true,
        maxItems: 5
      }
    ]
}

I've also tried without labelKey and with labelKey = "mention" , but <mention-list> in the view is always empty.

Any help would be appreciated!