Ngx-chips: Is there any way of using a full custom template for dropdown list?

Created on 23 May 2017  路  7Comments  路  Source: Gbuomprisco/ngx-chips

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ X ] support request/question

Current behavior
I can change the content within the dropdown list, but i cannot add custom extra elements.

Expected behavior
I would like to be able to add headings, a list of common searches, and pinned searches. I am using the input tag with a JSON call for getting items. The response is a multitude of objects that bases on different models. I would like to add a header between the different types in order to help the user tell the difference easily. I also want to save common searches, and let the user pin his/her searches which would be displayed in a list below the first list mentioned.

Quick example of expected html:

<tag-input [(ngModel)]="chosenItems"
    (onAdd)="onAdd($event)"
    [placeholder]="'Search further'"
    [secondaryPlaceholder]="'Search'"
    [onlyFromAutocomplete]="true">
    <tag-input-dropdown
        [appendToBody]="false"
        [matchingFn]="returnAllResultsFunc"
        [autocompleteItems]="autocompleteItems"
        [autocompleteObservable]="requestAutocompleteItems">
        <ng-template #customDropDown let-autocompleteItems="autocompleteItems">
            <!-- Code for autoCompleteItems and headers -->
            <div *ngFor="let autocompleteItem of autocompleteItems;">
                {{ autocompleteItem.display }}
            </div>
            <div class="pinned-searches">
                <!-- Code for Pinned search -->
            </div>
            <div class="common-searches">
                <!-- Code for common searches -->
            </div>
        </ng-template>
    </tag-input-dropdown>
</tag-input>

What is the motivation / use case for changing the behavior? (if applicable)
I think that the need of customizing the dropdown list should be available because it sort of completes this component.

What do you use to build your app? (SystemJS, Webpack, angular-cli, etc.). Please specify the version

Angular version:

angluar-cli ^1.0.0, ng2-tag-input

ng2-tag-input version:
^1.2.8

Browser: [all]

feature request

Most helpful comment

Hi @japalo,

I understand your points, I'll see what's possible to do in there :)

All 7 comments

Hi @japalo,

I understand your points, I'll see what's possible to do in there :)

this would be a great feature, +1

+1

Yes this would be a fantastic feature. I'd also like to do something similar, for example when the user starts typing tags and there are no matches, the drop-down would show: "Add newTag" and if they click on it, it would add the tag to the back-end, so it will appear in future drop-downs.

this would be a great feature, +1

Great! Nice job! :)

Is the feature already supported?

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Ignasimg picture Ignasimg  路  4Comments

Shinzah picture Shinzah  路  3Comments

matthewerwin picture matthewerwin  路  5Comments

neilharding picture neilharding  路  5Comments

DevInstinct picture DevInstinct  路  4Comments