Angular 2 multi select show only the static placeholder

0
votes

I am new to angular 4 and I started working on angular multiselect and using the following npm package

https://www.npmjs.com/package/angular2-multiselect-dropdown

I could able to configure this properly and also getting the selected and deselected items/events.

Now my problem is to show only the placeholder text even though there are selected items or not. I want to ignore the selected items to be shown on the top.

If any item is selected from the item the multi select box is converted like the below

enter image description here

But I would like to keep the placeholder same like below if there are selected items or not.

enter image description here

I have been trying to get out it with responsive behavior. But not able to find the solution. Please help me.

2
cssangularnpmresponsive-design
Please share a minimal Stackblitz sample replicating this issue. – SiddAjmera
I don't have experience with this component, but it looks like you can customize the way a selected item is shown in the textbox: <angular2-multiselect ...> <c-badge> <ng-template let-item="item"> <label style="margin: 0px;">{{item.itemName}}</label> ... </ng-template> </c-badge> </angular2-multiselect> (cf. npmjs.com/package/…) Maybe you can try with an empty template? – johey
Maybe you could try to ask your question on the developer's Github page. github.com/CuppaLabs/angular2-multiselect-dropdown/issues – johey

2 Answers

0
votes

Currently, it looks like the feature is not there. However, there is a work around.

Workaround

You could hide the list that is shown. In your CSS, you can add this:

.c-list{
   display: none;
}

This will not display back the 'Select Countries' placeholder, but it will partially achieve what you are trying to do.

0
votes

Work Around

Hide the list using CSS

angular2-multiselect /deep/ .c-list {
  display: none;
}

If you don't want the select items list growing, you can limit the number of badges shown by adding badgeShowLimit in the dropdown settings

enter image description here