Recently started learning Angular and facing some challenges in understanding a particular concept.
I am looking to create a dropdown menu with a list of options to choose from. Once an item is selected, it should be abbreviated in the dropdown box. For example, selecting Ohio would display OH after selection. However, when revisiting the dropdown, the full state name should still show up. I've attempted using click events and ngModelChange but haven't been successful. Any assistance would be greatly appreciated!
HTML:
<section *ngFor="let row of dataSource; let i = index">
<div class="column-state">
<mat-select (click)="changeFn(state)" placeholder="Choose State" [(ngModel)]="row.state">
<mat-option [value]="state.full" *ngFor="let type of stateList">
{{ state.full }}
</mat-option>
</mat-select>
</div>
</section>
Variable -
hi:any;
stateList= [
{full:'Ohio', short: 'OH'},{ full:'Minnesota', short:'MN'}, {full: 'California', short: 'CA'}];
function attempted -
changeFn(test:any) {
this.hi = test;
}