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>

Overseer

Where should the placeholder move to when an option is selected? – Ideatum

It should not, I need placeholder to be displayed event when an option is selected – Overseer

Where do you suppose the placeholder should be when an option is selected? Above the selected option, below the selected option or somewhere else? – Masefield

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. – Overseer

Answer 1

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>

Loafer

Answer 2

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>

Irreconcilable

Answer 3

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:

Vaudois

stackblits url just brings to stackblits home page. – Hendon

check it again, open the stackblitz of last sample – Vaudois

Answer 4

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

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

Ruthieruthless