Angular - Display another part of the Object after selected in Select

Question

I am displaying a few objects inside a select. But I want to show the user something different after selection than while picking his/her option. Is that even possible in Angular as it is in WPF?

My select looks like this:

<select class="vstatus-select" [(ngModel)]="rezept.kunde.versichertenstatus1" name="kunde_vstatus1">
   <option *ngFor="let vstatus of versichertenstatus1"[ngValue]="vstatus">
      {{vstatus.name}} - {{vstatus.kennung}}
   </option>
</select>

The Model:

export interface IVersichertenstatus{
    name: string;
    kennung: string;
}

The Key Problem is, that I want to show "kennung" and "name" while picking an option and only "kennung" afterwards. I also need ngValue to be the whole object and not just "kennung".

Cheers

Carles Ramos · Accepted Answer · 2022-08-04 12:57:50Z

1

You can try this.

<select class="vstatus-select" [(ngModel)]="rezept.kunde.versichertenstatus1" name="kunde_vstatus1">
   <option *ngFor="let vstatus of versichertenstatus1"[ngValue]="vstatus">
      <span *ngIf="your-condition-to-show-name">{{vstatus.name}} -</span> {{vstatus.kennung}}
   </option>
</select>

I hope this help you, regards

answered Aug 4, 2022 at 12:57

Carles Ramos

3543 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Schulze Over a year ago

are you thinking about focus -in and -out events? I like the approach and will try!

Schulze · Accepted Answer · 2022-08-04 13:29:49Z

Thanks to @Carles Ramos!

I've set two events - and functions which change a boolean. This boolean is used for the *ngIf tag.

<select class="vstatus-select" 
   [(ngModel)]="rezept.kunde.versichertenstatus1" 
   name="kunde_vstatus1" 
   (focus)="vselect_focus(1)" 
   (change)="vselect_focusout(1)">
   
   <option *ngFor="let vstatus of versichertenstatus1" [ngValue]="vstatus">
      <span *ngIf="selectedVersichertenstatus[0]">
         {{vstatus.name}} - 
      </span>
      {{vstatus.kennung}}
   </option>
</select>

The events look like this:

public selectedVersichertenstatus:boolean[] = [false, false, false];

vselect_focus(selector:number){
   this.selectedVersichertenstatus[selector-1] = true;
}

vselect_focusout(selector:number){
   this.selectedVersichertenstatus[selector-1] = false;
}

Collectives™ on Stack Overflow

Angular - Display another part of the Object after selected in Select

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related