Assign a value to a dynamically created dropdown menu in an Angular 5 tabular grid

Within each row, there are various other controls along with a specific dropdown list. Following a redirect and initialization using ngInit, the item variable has a value which is then set for every row. Everything is functioning correctly except for the dropdown list - simply updating the item.duration model does not reflect the selected value in the dropdown.

                 <td>
                  <select class="form-control" (change)="durationChange(item, $event.target.value)" [value]='item.duration'>
                    <option value="1">1 Month</option>
                    <option value="3">3 Months</option>
                    <option value="6">6 Months</option>
                  </select>
                </td>

https://i.sstatic.net/7Axpu.png

angulartypescriptangular5

Answer №1

utilize the ngModel directive 

<select class="form-control" [(ngModel)] ="item.duration" (change)="durationChange(item, $event.target.value)" [value]='item.duration'>

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

Cannot use a 'string' type expression to index a 'Request<ParamsDictionary, any, any, Query>' type

Currently, my goal is to develop a middleware that can validate the input data in a request. export function validator(schema: Joi.ObjectSchema, key: string) { return function (req: Request, res: Response, next: NextFunction): void { try { Joi ...

node.jstypescriptexpress

Two primary router outlets featuring unique layouts

Design for all users Design for staff members (such as admin control panel) I am using a router-outlet with the first design. How can I switch to the second design at "/personnel"? I want to keep both designs intact since "personnel" has its own componen ...

angularroutesrouteroutlet

Adding color background to specific text within an input field in Angular for highlighting purposes

As an illustration, suppose a user types a series of characters in the input field and I aim to emphasize only the word "hello" in the input field (similar to how Grammarly highlights text). ...

angular

Tips for handling user click events in Angular 2?

In Angular2, I am facing an issue with two components. When a user clicks a button in component1, a method is triggered that stores data in the shared service to a variable. However, component2's ngOnInit() method initializes this variable to undefine ...

angulartypescriptangular2-formsangular2-services

Using ESLint to enforce snake_case naming conventions within TypeScript Type properties

When working with TypeScript, I prefer to use snake_case for properties within my Interfaces or Types. To enforce this rule, I have configured the ESLint rule camelcase as follows: 'camelcase': ["error", {properties: "never"}], Even though the E ...

javascripttypescripteslinttslinttypescript-eslint

Displaying a collection of objects in HTML by iterating through an array

As someone new to coding, I am eager to tackle the following challenge: I have designed 3 distinct classes. The primary class is the Place class, followed by a restaurant class and an events class. Both the restaurant class and events class inherit core p ...

javascriptarraystypescriptloops

The upload function does not allow re-uploading of a file that has been previously deleted

Attempting to upload a file using the following code onDrag(event:any) { console.log(this.toUpload); if(this.toUpload.length >0){ this.error = "Only one file at a time is accepted"; }else{ let fileName = event[0].name; let split ...

htmlangulartypescriptfile-upload

Formatting the Return Values of Ionic Select

Having an issue with Ionic 3. Using an <ion-select> element with ngModel="x". When attempting to display the value in the console, it shows with extra spaces and line breaks. I tried replacing line breaks with 'e' and spaces with 'a&ap ...

javascriptangulartypescriptionic-frameworkionic3

Enhance the efficiency of the algorithm for combining text nodes that contain decorations

I'm seeking assistance in merging two arrays of nodes along with their decorations. My current algorithm is functional but highly inefficient. I would appreciate any suggestions for improvement or new ideas. Each node within the arrays contains text, ...

javascripttypescripttiptap

Can Angular Universal SSR be activated specifically for Googlebot User Agents?

I am aiming to activate Angular Universal SSR only when the User Agent is identified as Googlebot. However, I am uncertain about how to instruct Angular Universal SSR to deliver server side rendered HTML exclusively if the User Agent is Googlebot. server ...

javascriptc++node.jsangularexpress

When utilizing the RTK Query custom hook in Typescript, an error may occur stating "Invalid hook call. Hooks can only be called inside the body of a

While delving into next.js with rtkquery and typescript, I encountered an error in the useEffect hook within GoogleMapComponent.tsx. The React site pointed out that I was violating some rules of hooks usage, but this is a functional component being used in ...

javascripttypescriptreact-hooksfrontendrtk-query

a dedicated TypeScript interface for a particular JSON schema

I am pondering, how can I generate a TypeScript interface for JSON data like this: "Cities": { "NY": ["New York", [8000, 134]], "LA": ["Los Angeles", [4000, 97]], } I'm uncertain about how to handle these nested arrays and u ...

javascriptjsontypescriptinterface

Tips for obtaining the accurate HTML code format using Angular 2's input feature:

I am looking to retrieve all the code with an input as [input] and a tag as #tag. When attempting to obtain HTML code with jQuery using console.log($("#content")[0].outerHTML);, this is an example of how the code looks: <div dnd-droppable [dropZones]= ...

htmltypescriptangular

Encountering the 'CreateVerificationTokenError' issue when trying to log in through EmailProvider using Prisma and Next-Auth

When working with next-auth and prisma adapter, I encountered an issue while trying to use the email provider. On my sign-in "Header," clicking it opens the /signin page without any problems. However, when attempting to sign in using the email provider, an ...

typescriptnext.jsprismanext-authprisma2

Creating an Ionic v4 alert box that redirects users to different pages

I am facing an issue with my ion-alert component where I have set up a message with two options, "To Myself" and "To Someone", that should act like buttons and route to different pages in the application. However, using (click) events or [routerLink] on th ...

angularionic-frameworkangular-ui-routerangular-routingionic4

How do I use [(ngModel)] to set custom multiple select with 'selected' options with Angular and Materialize CSS?

Below is a snippet of code I am working with: <div class="input-field col s12"> <select name="uniqueName" [(ngModel)]="model.servicesIds" multiple> <ng-container *ngFor="let service o ...

angularmaterialize

How to locate a specific object by its ID within a JSON structure embedded in an HTML template

I am currently working on the page where I display posts. Within my controller, I have: export class PostsComponent implements OnInit { posts$: Object; users$: Object; constructor(private data: DataService) { } ngOnInit() { this.data.getPo ...

htmljsonangular

Ways to retrieve a repeated div element in a Typescript document

<div class="mx-0 p-2 row" style="box-shadow: 0 -1px 0 0 rgb(0 0 0 / 10%);"> <div #myDiv (click)="navToOrder(value.agId,value.invoiceId,value.tableNo,value.currStageName)" [style.background-color]="value.cur ...

htmlangulartypescriptangular-material

Using regex to replace problems with line breaks with BR tags

I have a block of text that I need to modify by replacing BR tags with \n in order to create new lines. D:\HP\ConfigurationServer_3464\log\nvdmr***.log ~ File not found<br>D:\HP\DCSSchedulerAgent_3478\logs&bso ...

javascriptregextypescript

Access the CSV file using Office365 Excel via a scripting tool

Objective I want to open a CSV file using Office365's Excel without actually saving the file on the client's machine. Challenge The issue with saving raw data on the client's machine is that it leads to clutter with old Excel files accumu ...

javascriptexceltypescriptcsvoffice365