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

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
                
                (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"  [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.

CodePudding user response：

by default, you do not need to specify a fixed selected value. When you click on an option, the value clicked will automatically be selected. The selected keyword in your first option will only be preselected from the start.

You could achieve your result by:

<option value="" selected>
    Filters ({{ 'RESEARCH.RESOURCES.FILTERING.MOBILE.DEFAULT_OPTION' | translate }})
</option>
<option *ngFor="let option of filterOptions"  [value]="option">
    Filters {{option.name}} // there make sure to add the desired name
</option>

This should do the trick

CodePudding user response：

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