8000 How to use the directive with async API results? · Issue #221 · dmacfarlane/angular-mentions · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content
8000

How to use the directive with async API results? #221

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
konstantinosftw opened this issue Sep 13, 2022 · 3 comments
Open

How to use the directive with async API results? #221

konstantinosftw opened this issue Sep 13, 2022 · 3 comments

Comments

@konstantinosftw
Copy link

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
Copy link
Owner

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

@konstantinosftw
Copy link
Author

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
Copy link
Author

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@dmacfarlane @konstantinosftw
0