[ SOLVED ] Angular 2+ get specific value on selected value #21495

TheScripterX · 2020-05-19T04:55:35Z

TheScripterX
May 19, 2020

I’m learning Angular 2+ and I’m at a dead end …
I have an Array in TypeScript :

models = [{idModele: 1, model: "Bianca", price: 500}, {idModele: 2, model: "etc", price: 600}]

I would like to know how it is done so that when I choose a specific model, I automatically receive its price in < p > balise or something else.

Here is my HTML Example :

<select class="form-control" id="modeles" formControlName="modeles">
<option selected>Choisir...</option>
<option *ngFor="let modele of modeles">{{ modele.modele }}</option>
</select>

Thank you in advance.

Answered by TheScripterX

May 19, 2020

I got a solution from others community ^^

I used in HTML :

<select class="form-control" id="modeles" [(ngModel)]="selectedValue"> <option *ngFor="let model of models" [value]="model.price">{{ model.name }}</option> </select> <p>{{selectedValue}}</p>

And in TS :

selectedValue: number;
models = [{ idModele: 1, name: "Bianca", price: 500 }, { idModele: 2, name: "etc", price: 600 }];

And it’s working :slight_smile:

View full answer

TheScripterX · 2020-05-19T14:05:31Z

TheScripterX
May 19, 2020
Author

I got a solution from others community ^^

I used in HTML :

<select class="form-control" id="modeles" [(ngModel)]="selectedValue"> <option *ngFor="let model of models" [value]="model.price">{{ model.name }}</option> </select> <p>{{selectedValue}}</p>

And in TS :

selectedValue: number;
models = [{ idModele: 1, name: "Bianca", price: 500 }, { idModele: 2, name: "etc", price: 600 }];

And it’s working :slight_smile:

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

GitHub Community

[ SOLVED ] Angular 2+ get specific value on selected value #21495

{{title}}

Replies: 1 comment

{{title}}

Select a reply

Navigation Menu

GitHub Community

[ SOLVED ] Angular 2+ get specific value on selected value #21495

TheScripterX May 19, 2020

Replies: 1 comment

TheScripterX May 19, 2020 Author

TheScripterX
May 19, 2020

TheScripterX
May 19, 2020
Author