Accessing a specific value based on a selected option in Angular 2+

Question

Accessing a specific value based on a selected option in Angular 2+

Examining the Angular 2+ code snippet below, there is an Array defined in TypeScript:

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

The query here is about setting up a mechanism where selecting a specific model would dynamically display its price within a < p > tag or similar element.

An illustration using HTML Example:

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

javascript angular typescript

Answer 1

Answer №1

If you want to achieve this task effortlessly:

Simply include the following code in your app.component.ts:

export class AppComponent  {
  selectedPrice:Number
  models:Array<Object> = [
      {idModele: 1, model: "Bianca", price: 500}, 
      {idModele: 2, model: "etc", price: 600} 
  ] 
}

Next, add the given code snippet in your app.component.html:

<h1>Selecting Model</h1>
<select [(ngModel)]="selectedPrice">
  <option *ngFor="let model of models" [ngValue]="model.price">
    {{model.model}}
  </option>
</select>

<hr>

<p>{{ selectedPrice }}</p>

Answer 2

If you want to achieve this task effortlessly:

Simply include the following code in your app.component.ts:

export class AppComponent  {
  selectedPrice:Number
  models:Array<Object> = [
      {idModele: 1, model: "Bianca", price: 500}, 
      {idModele: 2, model: "etc", price: 600} 
  ] 
}

Next, add the given code snippet in your app.component.html:

<h1>Selecting Model</h1>
<select [(ngModel)]="selectedPrice">
  <option *ngFor="let model of models" [ngValue]="model.price">
    {{model.model}}
  </option>
</select>

<hr>

<p>{{ selectedPrice }}</p>

Answer 3

Answer №2

Take a look at the code snippet below.

HTML Code:

    <select class="form-control" id="options" [(ngModel)]="selectedItem">
    <option *ngFor="let option of optionsList" [value]="option.price">{{ option.name }}</option>
</select>

<p>{{selectedItem}}</p>

Typescript Code:

 selectedItem: number;
  optionsList = [
    { id: 1, name: "Option 1", price: 100 },
    { id: 2, name: "Option 2", price: 200 }
  ];

https://example.com/img.png

Answer 4

Take a look at the code snippet below.

HTML Code:

    <select class="form-control" id="options" [(ngModel)]="selectedItem">
    <option *ngFor="let option of optionsList" [value]="option.price">{{ option.name }}</option>
</select>

<p>{{selectedItem}}</p>

Typescript Code:

 selectedItem: number;
  optionsList = [
    { id: 1, name: "Option 1", price: 100 },
    { id: 2, name: "Option 2", price: 200 }
  ];

https://example.com/img.png

Answer 5

Answer №3

Here is a solution to try out:

If you're working in HTML:

<select . . .  [(ngModel)]="selectedValue"> 
    <option *ngFor="let model of models" [value]="model?.price">{{model.name}}</option> 
</select> 

{{selectedValue}}

And if you're working in TypeScript:

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

Answer 6

Here is a solution to try out:

If you're working in HTML:

<select . . .  [(ngModel)]="selectedValue"> 
    <option *ngFor="let model of models" [value]="model?.price">{{model.name}}</option> 
</select> 

{{selectedValue}}

And if you're working in TypeScript:

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

Accessing a specific value based on a selected option in Angular 2+

Answer №1

Answer №2

Answer №3

Similar questions

"Encountering issues with jQuery Ajax: Dealing with HTTP 405 or

Should we opt for Controlled components or Uncontrolled components when it comes to working with HTML forms in React

Building Custom Request Types for a Personalized Express Router in TypeScript (TS2769)

Is it possible to perform a legitimate POST request using AJAX XMLHttpRequest, rather than the traditional var=val URL type post?

Choose your options effortlessly with CSS or JavaScript dropdown menus

Show complete items in Vue.js

Is there an issue with the newline character ` ` not functioning properly in TypeScript when used with the `<br/>` tag?

Having trouble importing the obj loader library in three.js

Passing a variable to a template in Node.js and express with hbs is causing an unexpected identifier error

Issue with ExtJs 4 Grid panel resizing incorrectly when window is resized

Retrieve all the data enclosed within the span tags

What is the best method for organizing data in rows and columns?

Omit modules from the ng-bootstrap package when working with Angular 2

Dealing with timeouts in getJSON requests

Utilizing the PATCH method with Dropwizard to remove a designated item from a list that is a part of another list

Error: Query is not valid

What is the process for setting up custom global interfaces in TypeScript using .d.ts files?

Utilize the express library (NodeJS, TypeScript) to send back the results of my function

What is the best way to change a blob into a base64 format using Node.js with TypeScript?

Identifying the moment when a user deselects an option in mat-autocomplete