Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
125
How can i access the selected text
posted

Based on your sample i can use 

[value]="dropDown.selectedItem?.value"  to display the value of the selected item which works fine.
But what i want to do is to show the Text of the item the user selected.
i populate the dropdown via ngFor like this
<igx-drop-down #dropDown [width]="'260px'">
      <igx-drop-down-item *ngFor="let selectOption of options" [value]="selectOption.value">
        {{ selectOption.name }}
      </igx-drop-down-item>
  </igx-drop-down>
i looked in the docs but could not find any info on how to access it, i can access index etc nut not text.
  • 80
    Offline posted

    Hi Alex,

    Thanks for reaching out!

    In the above scenario, you can access the selected item's text using one of the following approaches:

    1. Set the item's value to `[value]="selectedOption"` and access it via `dropDown.selectedItem?.value.text`

    2. With the value input being as is, access the inner text of the selected drop-down item with `dropDown.selectedItem?.element.nativeElement.innerText`

    You can see both of the above cases in this StackBlitz Example.

    The drop-down items do not have a specific input for their displayed text, as that is fully templatable and not necessarily only dependent on the `value` object.

    Hope this was helpful!

  • 80
    Offline posted in reply to Alex P

    Hi Alex,

    Thank you for your feedback!

    Since the drop-down
    selection event contains a reference to the whole `IDropDownItemBase` item, you can bind the whole object reference to item's `value` property and then handle which property you want to write to the DB service.

    public handleSelectionChange(event: ISelectionEventArgs) {
            /**
             * `selectedItem.value` can contain a reference to the **data entry**,
             * thus containing **all** of the needed properties
             * Only the appropriate `valueKey` property (in this case - `id`)
             * can still be passed to the selection by doing the following:
             */
            this.dbService.selectItem(event.newSelection.value.id);
        }


    Bind the selection service (called `DataService` in the example) with a subscription and have it update the selected item in the drop-down each time the value changes:
    public ngAfterViewInit() {
          requestAnimationFrame(() => {
            this.dbService.selectedItem.pipe(takeUntil(this.destroy$)).subscribe((selected: any) => {
                    this.dropDown.selectItem(this.dropDown.items.find(item => item.value.id === selected));
                });
          })
        }


    Then, in the template, just take the value of the drop-down's selected item (which is now set to the whole data item) and access the text property (`text` in the example):
    <div class="display-type">
    		From Value
    	</div>
    	<div class="display-field">
    		{{dropdown.selectedItem?.value.text }}
    	</div>


    Alternatively, the approach with accessing the selected item's innerHTML is still applicable.
    <div class="display-type">
    		Element Text
    	</div>
    	<div class="display-field">
    		{{dropdown.selectedItem?.element.nativeElement.innerHTML }}
    	</div>


    If you do not want to access the drop-down's selected item in order to get the text, but want to rely solely on the DataService's selected value, you can create a pipe that extracts the text from the items collection (which you have independent access to):
    Define a pipe that finds the selected item in a collection and returns its `text` property
    /**
     * @param allItems: the collection of items from which the selected item text should be extracted
     * @param valueKey: the property of the entry that is written to the DB
     * @param displayKey: the property of the entry that should be displayed
     * @param selectedValue: the value currently marked as selected in the DB Service
     */
    @Pipe({
      name: 'value'
    })
    export class ValuePipe implements PipeTransform {
    
      transform(allItems: any[], valueKey: any, displayKey: any, selectedValue: any): any {
        if (valueKey === null || valueKey === undefined || displayKey === null ||
          displayKey === undefined || allItems.length === 0) {
          return '';
        } else {
          return selectedValue !== null && selectedValue !== undefined ? allItems.find(e => e[valueKey] === selectedValue)[displayKey] : '';
        }
      }
    }
    


    And call the pipe in your component template to access the text:
    <div class="display-type">
    		From Service
    	</div>
    	<div class="display-field">
    		{{ items | value:"id":"text":(dbService.selectedItem | async) }}
    	</div>


    All of the above 3 approaches can be seen in action in this updated StackBlitz sample.

    Alternatively, if you would like to take advantage of Angular's `Two way binding`, you should also take a look at the `IgxSelect` component, which supports value binding out of the box.

    I hope this is helpful!