CODEWITHSUNDEEP
angularconcatenationangular-ngselect
cn-ge
cn-ge

Reputation: 81

Angular 6 Concat string for BindLabel in <ng-select tag>

Using Angular 6, I want to concat Firstname and Lastname in bindLabel inside ng-select tag ?

Here is my html : ng-select [items]="persons" bindLabel="LastName" bindValue="Id" [(ngModel)]="selectedItem" placeholder="person"

Any idea ? bindLabel="LastName + ' ' +FirstName" => doesn't work bindLabel="person.Name as (person.LastName + ' ' person.FirstName) for person in persons" => doesn't work

Upvotes: 5

Views: 10040

Answers (2)

Diogo
Diogo

Reputation: 553

A better way for display the full name is:

 <ng-select required [items]="buddies" bindLabel="firstName" #buddiesInput="ngModel" [(ngModel)]="userSelect" name="userSelect" >
                        <ng-template ng-label-tmp let-item="item">
                            {{item.firstName}} {{item.lastName}}
                        </ng-template>
                        <ng-template ng-option-tmp let-item="item" let-search="searchTerm">
                            {{item.firstName}} {{item.lastName}}
                        </ng-template>
                    </ng-select>

Upvotes: 14

jck
jck

Reputation: 331

Pretty old question but I will still answer. I happened to catch this question as I am also looking for the same solution.

Not maybe the best practice or there might be much better solution but I just created a map for my array so I could create a new field for full_name.

See code below if this could help you out.

template:

  <ng-select 
    [(ngModel)]="_selected_user" 
    [items]="_all_users" 
    placeholder="Select User"
    bindLabel="full_name"
    bindValue="id"
    >

    <ng-template ng-option-tmp let-item="item" let-search="searchTerm">
        <div><span></span><span [ngOptionHighlight]="search">{{item.full_name }}</span></div>
        <small>User ID: <b>{{item.user_id}}</b> </small>
    </ng-template>

  </ng-select>

component:

      users.map(
        (user: any) => {
          user.full_name = user.last_name + ', ' + member.first_name + ' ' + member.middle_name
          return member;
        }
      )

This one will enable searching via first_name or last_name or middle_name or altogether in one search key.

Upvotes: 3

Related Questions