How to always display a placeholder of ng-select?

Question

I am using ng-select in my Angular application and have quite an unusual use case. I need to always display the placeholder, even on option selected. With current code the placeholder is replaced with the value of selected option:

<ng-select
  [(ngModel)]="selectedApplication"
  class="application-switcher"
  [attr.data-sel-id]="selId"
  [clearable]="false"
  appendTo="body"
  [searchable]="false"
  placeholder="{{ 'APP_TITLE' | translate }}"
  [virtualScroll]="virtualScroll"
  [markFirst]="false">
    <ng-option *ngFor="let application of applicationList" [value]="application">
      <div>
        {{ getApplicationName(application) }}
      </div>
    </ng-option>
</ng-select>

Where should the placeholder move to when an option is selected? — Ramesh Reddy, Feb 24 '20 at 13:50
It should not, I need placeholder to be displayed event when an option is selected — unclePutin, Feb 24 '20 at 13:53
Where do you suppose the placeholder should be when an option is selected? Above the selected option, below the selected option or somewhere else? — ruth, Feb 24 '20 at 13:55
Maybe I phrased the question incorrectly, the placeholder should not appear anywhere else, the value of selected option should not override the placeholder value displayed. — unclePutin, Feb 24 '20 at 14:00

score 5 · Answer 1 · answered Feb 04 '21 at 12:39

Note:

We can combine the chips view with show more option as

Code Snippet:

<ng-select
          [items]="depositGroupList"
          bindLabel="groupName"
          bindValue="groupId"
          formControlName="groupId"
          appearance="outline"
          class="custom"
          [multiple]="true"
          [searchable]="true"
          [closeOnSelect]="false"
          [clearable]="true"
        >
          <ng-template
            ng-multi-label-tmp
            let-items="items"
            let-index="index"
          >
            <div class="ng-value" *ngFor="let item of items | slice: 0:2">
              {{ item.groupName }}
            </div>
            <div class="ng-value" *ngIf="items.length > 2">
              <span class="ng-value-label"
                >{{ items.length - 2}} more...</span
              >
            </div>
          </ng-template>
        </ng-select>

Masoud Bimmar · Answer 2 · 2020-08-20T04:28:59.020

If You Wana Have a fix placeholder inside the selected items area, you can do it this way:

Custom template for all selected items using ng-multi-label-tmp

<ng-select
    [items]="githubUsers$ | async"
    [multiple]="true"
    bindLabel="login"
    bindValue="login"
    placeholder="Select items"
    [(ngModel)]="selectedUsers">
    <ng-template ng-multi-label-tmp let-items="items" >
        <div class="ng-value" >
            <span class="ng-value-label">Items Selected: </span>
        </div>
        <div class="ng-value" *ngFor="let item of items ">
            <span class="ng-value-label"> {{item.login}}</span>
            <span class="ng-value-icon right" (click)="clear(item)" aria-hidden="true">×</span>
        </div>

    </ng-template>
</ng-select>

Change the html file in Stackblitz of this sample Custom template for all selected items using ng-multi-label-tmp to see the result:

stackblits url just brings to stackblits home page. – Janatbek Orozaly Aug 20 '20 at 01:30 — Janatbek Orozaly, Aug 20 '20 at 01:30
check it again, open the stackblitz of last sample – Masoud Bimmar Aug 20 '20 at 04:29 — Masoud Bimmar, Aug 20 '20 at 04:29

score 0 · Answer 3 · answered Jul 08 '20 at 13:24

You can do this

      <ng-select [items]="objects"
            bindLabel="name"
            bindValue="name"
            groupBy="type"
            [clearable]="false"
            placeholder="Select your choice...">


           <ng-template ng-multi-label-tmp let-items="items" >
            <div class="ng-value" >
                <span class="ng-value-label">Select your choice... </span>
            </div>
           </ng-template>


           <ng-template ng-option-tmp let-item="item" let-index="index">
                <span class="ng-value-label">{{item.name}}</span>
           </ng-template>
       

    </ng-select>

score 0 · Answer 4 · edited Mar 10 '21 at 16:03

0

As a quick workaround you can try to add a custom template and leave it empty.

<ng-template ng-multi-label-tmp></ng-template>

edited Mar 10 '21 at 16:03

Dharman

30,962
25
85
135

answered Mar 10 '21 at 15:58

the_dude

1

How to always display a placeholder of ng-select?

4 Answers4

Linked