Tutorials on transferring selected option data to a component

Question

Tutorials on transferring selected option data to a component

My JSON data is structured like this:

Whenever I choose an option, I want to pass the values (code and description) from the JSON object to the component.

nameList= [
  {
    "code": "1",
    "description": "abc"
  },
  {
    "code": "123",
    "description": "def"
  },
  {
    "code": "100",
    "description": "ijk"
  }
]

Below is the HTML code:

<select [(ngModel)]="description" #category="ngModel" aria-required
 (change)="getNameList()"> //want to send data.code value to component
    <option style="display:none"></option>
    <option *ngFor="let data of nameList"> {{data.description}} 
    </option>
</select>

Check out the demo here

javascript angular typescript

Answer 1

Answer №1

For optimal results, implement the following code snippet: [ngValue]="data"

 <option *ngFor="let data of nameList" [ngValue]="data"> {{data.description}} 
 </option>

Upon implementation, access the component as follows:

  getNameList() {
     console.log(this.description);
  }

Experience a LIVE DEMO on StackBlitz

Answer 2

For optimal results, implement the following code snippet: [ngValue]="data"

 <option *ngFor="let data of nameList" [ngValue]="data"> {{data.description}} 
 </option>

Upon implementation, access the component as follows:

  getNameList() {
     console.log(this.description);
  }

Experience a LIVE DEMO on StackBlitz

Answer 3

Answer №2

If you want to enhance your TypeScript code, consider utilizing interfaces. Here's an example of how your HTML could look:

<hello name="{{exampleSelected?.description}}"></hello>

<select [(ngModel)]="exampleSelected" aria-required (change)="getNameList()">
    <option style="display:none"></option>
    <option *ngFor="let data of nameList" [ngValue]="data"> {{data.description}} 
 </option>
</select>

As for your TypeScript code:

import { Component } from '@angular/core';


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})


export class AppComponent {
  exampleSelected;

  nameList = [
    {
      "code": "1",
      "description": "abc"
    },
    {
      "code": "1",
      "description": "def"
    },
    {
      "code": "1",
      "description": "ijk"
    }
  ]

  getNameList() {
    console.log(this.exampleSelected);
  }
}

Answer 4

If you want to enhance your TypeScript code, consider utilizing interfaces. Here's an example of how your HTML could look:

<hello name="{{exampleSelected?.description}}"></hello>

<select [(ngModel)]="exampleSelected" aria-required (change)="getNameList()">
    <option style="display:none"></option>
    <option *ngFor="let data of nameList" [ngValue]="data"> {{data.description}} 
 </option>
</select>

As for your TypeScript code:

import { Component } from '@angular/core';


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})


export class AppComponent {
  exampleSelected;

  nameList = [
    {
      "code": "1",
      "description": "abc"
    },
    {
      "code": "1",
      "description": "def"
    },
    {
      "code": "1",
      "description": "ijk"
    }
  ]

  getNameList() {
    console.log(this.exampleSelected);
  }
}

Tutorials on transferring selected option data to a component

Answer №1

Answer №2

Similar questions

Executing a TypeScript function directly in HTML without the need for a click event

What is the location to enter the function I wish to execute in Bootstrap JavaScript?

The Eclipse Phonegap framework is experiencing difficulty in loading an external string file with the jquery .load function

Guide on utilizing map function and reassigning the value

How can I silence the warnings about "defaultProps will be removed"?

release a Node.js module on NPM

Setting a default year in a React datepicker: A step-by-step guide

Implementing Angular's Lazy loading feature can be achieved by loading a module within another module that has

Include specific javascript files only for smartphones

What is your approach to organizing the HTTP requests in your Angular 2+ application?

Encountering problem with image file encoding while using res.download in Express.js

Ways to modify the color of mat-icon within an input field using Angular 6

Is Angular9 BehaviorSubject from rxjs giving trouble across different components?

Difficulty encountered when applying date filtering on a specific filter in the MUI-DataGrid

Using Knex to Generate a Migration Including a Foreign Key

Develop a built-in Button for Liking posts

Updating API calls with form submission in React.js

Creating a variable amount of datasets depending on database values in an easy way

Learn the process of eliminating special characters from input or textarea fields with AngularJs!

Exploring the ins and outs of data exchange within Angular 2