What is the best way to obtain and transmit an ID from an Angular dropdown menu selection

Can you assist me with a coding issue? In my template, I have a select dropdown with options saved in a list of settings. Each setting has its own unique id. I also have a data model in my interface for fields sent or received from the backend. How can I extract the id of the selected option and send it to the optionId field? Thank you for your help.

interface.ts

export interface IData {
   id: string;
   name: string;
   optionId: any;
}

html

<select formControlName="templateListValue">
   <option *ngFor="let tempItem of templateListOptions" [value]="templateItem.id">
     {{tempItem.name}}
   </option>
</select>

ts

public getIdFromTemplate() {
   return this.templateListOptions.find
 ((element: ITemplateData) => element.id === this.form.controls.templateListValue.value);
}

Answer №1

By utilizing the valueChanges method, you can monitor your control for any modifications and subsequently locate the specific element.

this.formGroup.controls.templateListValue.valueChanges.subscribe(id => {
    const element = this.templateListOptions.find((element: ITemplateData) => element.id === id);
    console.log(element);
    console.log(element.optionId)
})   

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular Kendo Grid (version 1.4.1)

I am currently encountering an issue where I want to select the first row in a Kendo Grid. Here is the code snippet that I have implemented: In my Component file: export class SampleComponent{ gridView: GridDataResult; mySelection: number[] = [0]; ...

JavaScript: Retrieve the Number of Subscribers on the BroadcastChannel

Is there a way to check if a Broadcast channel exists and see how many subscribers it has? We have a product link, and some Chrome tabs are subscribed to a Broadcast channel. We want to determine the number of listeners. const bc = new window.BroadcastCha ...

Destructuring objects with default values from two related interfaces

In my project, I have defined two interfaces called User and BankUser. The structure of the interface for BankUser looks like this: interface BankUser extends User { banks: { [bank_id: string]: string}; isSuper: boolean; } I am working on a function ...

Is there a way to access the element reference of a component directly within the template?

When I mouse over certain elements, I use the following code to set focus: <div #divTemplateVar (mouseover)="divTemplateVar.focus()"></div> However, this method does not work for components: <component #componentTemplateVar (mouseover)="c ...

A new interface property type that is customized based on the type property that is passed in

My dilemma lies in a generic interface with a field depending on the passed type. I'm exploring the possibility of having another field that can accept any type from the passed type. For instance: interface sampleObject { name: fullName age: n ...

Accessing specific route through a named outlet

Is it possible to achieve something like this? [routerLink]="['page1','page2',{ outlets: { myoutlet: ['page3','page4'] } }]" How should a route configuration be set up for lazy loading? Edit: It seems that the in ...

Using ngOnChange on a FormGroup in Angular

Is there a way to detect real-time changes in the fields of a FormGroup? My component structure consists of a simple parent-child setup: Parent Component View <my-child [myForm]="myForm"></my-child> Child Component Controller @Input() myFor ...

"The act of initializing an EntryComponent in Angular results in the creation of a brand

In my main component, app.component.ts, I have integrated a new service into the providers[] array and initialized it in the constructor: @Component({ selector: 'app-main', templateUrl: './app.component.html', styleUrls: ['. ...

3 Ways to Ensure Your Picture Uploads are Visible Right Away

I am currently working on an Ionic app that enables users to upload images to Firebase storage. One issue I am encountering is that the image only changes once a new one is selected, after closing and reopening the app. I would like it to update immediatel ...

React is unable to assign a class field beyond the scope of axios

class App extends React.Component { app: Application; ... componentDidMound() { axios.get(…).then(res => { this.app.currentUser = res.data.data; // setting value inside lambda function. console.log(this.app.currentUser); // ...

Angular CLI version incompatibility has been encountered. This particular version of CLI is specifically designed to work with Angular versions ^13.0.0 || ^13.3.0-rc.0. However, the system detected Angular version 14

After updating my ionic project to Angular 14, everything worked smoothly when running ionic s. However, when I attempted to test it on my android device by running ionic cordova run android, I encountered the following error: [ng] This version of CLI is o ...

What could be the reason behind the for loop not running within a typescript function?

My confusion lies in the for loop within this function that seems to never run. Each console log is set up to return a specific value, but the looping action doesn't trigger. Can someone provide insight into what might be causing this issue? export fu ...

How can I access keys and values from an Observable within an Angular template?

Attempting to display all keys and values from an Observable obtained through Angular Firebase Firestore Collection. This is how I establish a connection to the collection and retrieve an Observable. The function is called subsequently. verOrden : any; ...

Encountering a problem while installing an Angular 2 npm package from an enterprise registry

We are utilizing an enterprise repository for NPM packages that mirrors the traditional registry "http://registry.npmjs.org/". I am currently attempting to fetch the following packages (listed in package.json) "@angular/common": "2.0.0-rc.4", "@angular/co ...

Updating Values in Nested Forms with Angular Reactive Form

I have been grappling with a form setup that looks something like this: itemEntities: [ {customisable: [{food: {..}, quantity: 1}, {food: {..}, quantity: 5}]}, {customisable: [{food: {..}, quantity: 0}]}, ] My challenge lies in trying to u ...

Issues discovered with using Typescript in Visual Studio 2015

I'm having trouble figuring out the issue. Right now, the typescript file is not appearing correctly in Visual Studio 2015. Take a look at the image linked here: https://i.stack.imgur.com/oXXWD.png ...

Struggling to map a JSON file in a NextJS project using Typescript

I'm a beginner in JS and I'm currently struggling to figure out how to display the data from a json file as HTML elements. Whenever I run my code on the development server, I encounter the error message: "props.books.map is not a function&q ...

"Encountering an unexpected error when Dockerizing an Angular App on Win10 Professional: EXPAND-ARCHIVE instruction not

I need to create a docker image for an Angular web application and deploy it on a Windows machine. However, I'm running into an issue when executing the command: docker build -t node . The following exception is thrown: Error response from daemon: ...

Is it possible to invoke a function exclusively on the center item within an ngx-owl-carousel?

Is there a way to call a function only when an element is in the center of a slider? This is my HTML: <owl-carousel-o [options]="customOptions"> <ng-container *ngFor="let slide of slides"> <ng-template carous ...

Angular Universal SSR - prerendering static content

After updating to the latest Angular version 10, I encountered an issue when trying to run a static prerender. The error message displayed is: Unhandled Promise rejection: Cannot read property 'moduleType' of undefined. Despite trying various con ...