The onChange function is not functioning properly in Angular 6

I'm currently developing a project in Angular 6 and I've encountered an issue with a dropdown in my template that is not working as expected:

<select id="companydropdown" onChange="getcompanyid(this)">
<option *ngFor="let company of filteredCompanies" value={{company.companyName}} 
id={{company.id}}>
{{company.companyName}}
</option>
</select>

In my component, I have the following code:

getcompanyid(s)
{
var id = console.log(s[s.selectedIndex].id);
alert(id);
}

However, for some reason, the method does not seem to execute properly.

angulartypescript

Answer №1

//Here is a helpful tip for you.

<select id="id" name="id" required  #id="ngModel" [(ngModel)]="company.id" class="form-control" (change)="getcompanyid(company.id)" >
                                <option [ngValue]="null">Select company Name</option>
                                <option *ngFor="let dept of filteredCompanies" [value]="dept.id">
                                    {{dept.companyName}}
                                </option>
                            </select>



//inside the component
getcompanyid(id:any)
{
alert(id);
//perform actions based on the id.
}

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

Why is Firebase Deploy only detecting 1-2 files? It might be due to the default index of Firebase hosting

I'm currently in the process of deploying my Angular App to Firebase Hosting. However, I am encountering an issue where it only displays the default firebase index hosting with no changes. To set up the deployment, I have used firebase init and speci ...

angularfirebasefirebase-hosting

Identifying the specific type within a union of types using a discriminator

How can I specify the correct typing for the action argument in the function withoutSwitchReducer as shown below? enum ActionTypesEnum { FOO = 'FOO', BAR = 'BAR', } type ActionTypes = { type: ActionTypesEnum.FOO, paylo ...

typescripttypescript2.0typescript3.0

VSCode is unable to locate the typeRoots type declarations

I have organized all the type definitions that will be used in my application into a single file. I created a folder named @types and an index.d.ts file that exports every interface/type needed. I updated my tsconfig.json to include the @types folder: { ...

typescriptvisual-studio-code

Tips for Resolving TypeScript Error 7053 when using the handleChange function in a React Form

Seeking assistance with creating a versatile handleChange function for a React form. The goal is for the handleChange function to update the state value whenever a form field is modified, while also accommodating nested values. Below is my attempt: const ...

reactjstypescript

Creating a standard Modal component in Angular

I am trying to create a versatile Modal component. When the user clicks on the Add button, I want the modal to open with the functionality to add new content. Similarly, when the user clicks on the Edit button, I want the same modal to display edit functio ...

javascriptangular

Retrieve the initial token from a union, referred to as an "or list," in Typescript

Is there a way to define a generic type F with the following behavior: type X = F<'a'|'b'|'c'> should result in X being 'a'. And if type X = F<'alpha'|'beta'|'gamma'|'del ...

typescripttypescript-genericstype-inferenceunion-types

Implementing Pagination and Sorting on Angular Material Table in Angular 6

Is there a way to integrate API service data into an Angular Material DataTable? I am trying to display dynamic data rather than using a static array. When I try to render the data using *ngFor="let item of service.list", the data loads but pagination an ...

angularangular-material

Tips for sorting multiple rows based on the primary column in MUI DataGrid ReactJS

https://i.stack.imgur.com/T9ODr.png Is there a way to utilize Material UI DataGrid to build a table that matches the structure displayed in the linked image? I have successfully created a basic table with DataGrid, but I'm struggling to add multiple ...

reactjstypescriptdatatablematerial-uidatagrid

Navigating the complexities of generic types in Typescript involves understanding how to work

Having an issue with my React + TypeScript application. I am trying to write a function to filter some data: function matchesFilter(element: T, filter: Filters) { const { name, options } = filter; return options.filter(selected => select ...

typescript

Incorporating the non-typescript npm package "pondjs" into Meteor applications using typescript files

Implementing the Pondjs library into my project seemed straightforward at first: meteor npm install --save pondjs However, I'm encountering difficulties when trying to integrate it with my Typescript files. The documentation suggests: In order ...

javascriptmeteortypescriptnpmangular2-meteor

Navigating an angular collection like a pro

I have the following example data structure within a Component: const Questions = { "java": [ {text: "Is this a question?", answer: "Yes"}, {text: "Another question", answer: "Yes"} ], "python": [ {text: "A different qu ...

angularcomponents

Angular 7 and its scrolling div

Currently, I am working on implementing a straightforward drag and drop feature. When dragging an item, my goal is to scroll the containing div by a specified amount in either direction. To achieve this, I am utilizing Angular Material's CDK drag an ...

angulartypescriptdrag-and-dropangular7

Tips for transforming a Json array into an object in Angular 5

I am working with a Json array that looks like this: [{"name":"ip","children":{"label":"ip","value":"","type":"text","validation":"{ required: true}"}} ,{"name":"test","children":{"label":"test","value":"","type":"text","validation":"{ required: true}"}} ...

angulartypescript

What is the most effective method for integrating templates using AngularJS and Webpack2?

UPDATE: I haven't come across a method to import templates using an import statement rather than require, but I have realized that I can streamline my configuration. In the webpack config, opt for html-loader over ngtemplate-loader for /\.html$/ ...

javascriptangularjstemplatestypescriptwebpack-2

Revamping the static method signature of a class in Typescript

One of the modules I'm using is called some-module and it defines a class like this: export declare class Some<T> { ... static create<T>(): Some<T>; map<U>(x: U): Some<U>; } export default Some In my project, I ...

typescript

No tests were found to run when Karma was executed using the ng test command

I'm facing an issue with my Angular 10 project where Karma is not detecting my default and custom spec.ts files for execution. Any ideas on why this could be happening? Here is a snapshot of my unchanged Karma Config file: // Karma configuration file ...

javascriptangularkarma-jasmineconfigkarma-runner

Weird occurrences in Typescript generics

function resizeImage<T extends File | Blob>(input: T, width: number, height: number): Promise<T> { return Promise.resolve(new File([new Blob()], 'test.jpg')) } Error: (48, 3) TS2322:Type 'Promise' is not assignable to ...

typescript

Having trouble making ngMouseEnter (and other similar commands) function correctly

I'm currently working with Bootstrap 4 on Angular 6, and I have a delete button that I want to change its icon when the cursor hovers over it. I've tried using various ng functions like ngMouseOver and ngMouseUp, but none seem to be effective in ...

htmlangulartypescriptbootstrap-4

Preserving Class Methods during Deserialization in Angular 2

Imagine I have a class called Foo: export class Foo { name: string; printName(): void { console.log(this.name); } } The issue arises when my FooService extracts a Foo object from the backend as JSON and converts it into a Foo instan ...

jsonangulartypescript

Attempting to search for an item by its id within a local json file using Angular

I have a local JSON file containing Kitchen types. I created the KitchenTypesService with two functions inside, GET and FIND(ID). The GET function is working fine, but the FIND function is not working and displaying an error "ERROR TypeError: Unable to lif ...

jsonangulartypescriptrxjsfind