Is it possible to change the display value the selected option in Angular?

Keagan 0
Viewed 34

I have a list of filters like this

I want to make it so when an option is selected, the display name of the selected option value changes also

Where the display name of only the selected option changes to "Filters ({selected filter})" instead of just "{selected filter}"

e.g. options: a b c

If "a" was selected then the display name would change to "Filters (a)"

This is code for the select options:

                <select
                id="mobile-filter"
                aria-labelledby="filter-label"
                #mobileFilter
                class="mobile-filter-dropwdown"
                (change)="mobileFilterSelect()"
                [(ngModel)]="selectedMobileFilter"
            >
                <optgroup label="{{ 'RESEARCH.RESOURCES.FILTERING.MOBILE.FILTER_OPTIONS' | translate }}">
                    <option value="" selected>
                        Filters ({{ 'RESEARCH.RESOURCES.FILTERING.MOBILE.DEFAULT_OPTION' | translate }})
                    </option>
                    <option *ngFor="let option of filterOptions" class="option" [value]="option">
                        <ng-container *ngIf="isNonLiteralFilter(option); else literalLabel">
                            {{ 'RESEARCH.RESOURCES.FILTERING.' + option + '.LABEL' | translate }}
                        </ng-container>
                        <ng-template #literalLabel>{{ option }}</ng-template>
                    </option>
                </optgroup>
            </select>

Any help would be much appreciated, have tried appending the text via this.mobileFilter.nativeElement, but no luck so far.

list angular
2 Answers

You should be able to achieve your wanted result by:

  1. on change trigger the mobileFilterSelect($event), get the event value and assign it to a selectedOptionValue variable

  2. modify your option like so:

<opt

<option value="" selected>
    Filters ({{ 'RES EARCH.RESOURCES.FILTERING.MOBILE.DEFAULT_OPTION' | translate }})
</option>
<option *ngFor="let option of filterOptions" class="option" [value]="option">
    {{option.name === selectedOptionName ? 'Filters ' + option.name : option.name}}
</option>

This should do the trick

mikegross0

this.mobileFilter.nativeElement.options[select.selectedIndex].innerText = "whatever you want"

Keagan0
Related