ng-select | Angular Community | Page 1

umbral pecan Jul 24, 2024, 9:40 PM

#

Please explain better your requirements and post code as text, not as image.

wicked otter Jul 24, 2024, 9:52 PM

#

I'm Angular ng-select. Is there a way to click on the element and copy the displayed text (selected option) ? <ng-select
[items]="endorsementEmployees"
[multiple]="false"
[searchable]="true"
bindLabel="fullname"
(search)="getEndorsementEmployee($event)"
[hideSelected]="true"
formControlName="employeeEndorsement"
(change)="endorsementEmployeeChange($event)"

</ng-select>

umbral pecan Jul 24, 2024, 9:52 PM

#

copy where?

wicked otter Jul 24, 2024, 10:04 PM

#

To clipboard

umbral pecan Jul 24, 2024, 10:10 PM

#

maybe using Navigator webapi.
Bind something like navigator.clipboard.writeText($event.value) to (change) output or whatever fit your needs.

#

Beware it can have some limitations based on the browser implementation.

wicked otter Jul 25, 2024, 5:20 PM

#

What I did was add a button to the right of the ng-select that performs the function of navigator.clipboard.writeText.

I added the following line.
@ViewChild('endorsementSelector', { static: false }) ngSelectComponent?: NgSelectComponent;

To reference the correct ng-select

<div class="form-group">
<label for="employeeEndorsement" class="col-form-label"> <i class="fas fa-user"></i> Endorsement </label>
<div class="row">
<div class="col-10">
<ng-select
#endorsementSelector
class="selectable-text"
id="endorsementSelector"
[items]="endorsementEmployees"
[multiple]="false"
[searchable]="true"
bindLabel="fullname"
placeholder="Select a endorsement person"
(search)="getEndorsementEmployee($event)"
[hideSelected]="true"
formControlName="employeeEndorsement"
(change)="endorsementEmployeeChange($event)"
></ng-select>
</div>
<div class="col-2 d-flex align-items-center justify-content-end">
<button (click)="copySelectedText()" class="btn btn-outline-secondary btn-sm" type="button" title="Copy Text">
<i class="fas fa-copy"></i>
</button>
</div>
</div>
</div>

umbral pecan Jul 25, 2024, 5:28 PM

#

You forgot to post the ts code for copySelectedText() function.
In any case you don't need the @ViewChild reference. You already got the value you need inside employeeEndorsement FormControl property of your component.
About the button: if you prefer to not have the value automatically copied on select, that's a good way to do it.

wicked otter Jul 25, 2024, 5:48 PM

#

My bad, This is the code.

copySelectedText() {
if (this.ngSelectComponent) {
const selectedItem = this.ngSelectComponent.itemsList.selectedItems[0];
if (selectedItem) {
const fullText = selectedItem.label || '';

        const match = fullText.match(/(?:\d+\s*-\s*)(.*)/);
        const nameText = match ? match[1] : fullText;
  
        navigator.clipboard.writeText(nameText).then(() => {
          console.log('Text copied');
        }).catch(err => {
          console.error('Error on copy: ', err);
        });
      } 
    }
  }

#ng-select