CODEWITHSUNDEEP
htmlangularng-templateng2-tag-input
Niranjan Shankar
Niranjan Shankar

Reputation: 147

how to add a button to angular 2's ng2-tag-input dropdown?

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.

Upvotes: 2

Views: 1203

Answers (1)

Irfan Pathan
Irfan Pathan

Reputation: 325

<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??

Upvotes: 0

Related Questions