2

I am trying to create a custom template using ng2-tag-input for my drop-down. I use this as reference: this link. I have retrieved an object array using an observable and populated the drop down.

Here is my html code (without the buttons yet):

<div class="users-container">
<tag-input [ngModel]="[]" [style.width]="100" theme="bootstrap" [onlyFromAutocomplete]="false" addOnBlur="true" addOnEnter="true" addOnSpace="true">
    <tag-input-dropdown [showDropdownIfEmpty]="true" [autocompleteObservable]='autocompleteItems$' [identifyBy]="'id'" [displayBy]="'name'">
        <!--custom template-->
        <ng-template let-item="item" let-index="index">
            <div class="float-left">
                <img class="user-image" src="{{item.photo}}" alt="user-image">
            </div>
            <div class="float-right">
                <span class="name">{{item.name}}</span>
                <span class="name">{{item.lname}}</span>
                <p>( {{item.dept}} )</p>
            </div>
            <div class="clear"></div>
        </ng-template>
    </tag-input-dropdown>
</tag-input>

I am able to successfully get my custom template, but I also additionally need to display two buttons along with the drop-down values, like this:the custom template repeats and at the end, there are these 2 buttons I need. I do not know how to add them, as I am new to Angular2. Any help would be appreciated.

Mike Feltman
  • 5,160
  • 1
  • 17
  • 38
Niranjan Shankar
  • 147
  • 2
  • 2
  • 12

1 Answers1

0
<tag-input [ngModel]="[]" [style.width]="100" theme="bootstrap" [onlyFromAutocomplete]="false" addOnBlur="true" addOnEnter="true" addOnSpace="true">
    <tag-input-dropdown [showDropdownIfEmpty]="true" [autocompleteObservable]='autocompleteItems$' [identifyBy]="'id'" [displayBy]="'name'">
        <!--custom template-->
        <ng-template let-item="item" let-index="index">
            <div class="float-left">
                <img class="user-image" src="{{item.photo}}" alt="user-image">
            </div>
            <div class="float-right">
                <span class="name">{{item.name}}</span>
                <span class="name">{{item.lname}}</span>
                <p>( {{item.dept}} )</p>
            </div>
            <div class="clear"></div>
        </ng-template>

    </tag-input-dropdown>
    <button>Cancel</button>
    <button>Send</button>
</tag-input>

This above code doesn't work for you??

Irfan Pathan
  • 309
  • 1
  • 3
  • 14
  • No, unfortunately it does not solve my problem. **I want the buttons only in drop-down**. Your code will show default button beneath the input box. Everything that comes in drop-down must be wrapped within `` – Niranjan Shankar Jun 16 '17 at 08:19
  • what if you put button statement inside `` – Irfan Pathan Jun 16 '17 at 09:02
  • It wouldn't appear in DOM. Only anything within `` would appear and the `` acts like a repeating DOM element, so if I add button inside `` it'll repeat in every drop-down element. – Niranjan Shankar Jun 16 '17 at 09:59