Error: `target` property is not recognized on `htmlelement` type

I am attempting to retrieve the ID of a list item in a select menu but I am having trouble getting the value from it. The value should be a number. HTML File

<div class="form-group mt-3">
    <label class="form-label">Product Category</label>
    <select class="form-control" #categoryId>
      <option *ngFor="let cat of categories" value="{{ cat.catId }}">
        {{ cat.catName }}
      </option>
    </select>
  </div>
  <div class="form-group mt-3">
    <button
      class="btn btn-success"
      (click)="
        saveProduct(productName.value, productPrice.value, categoryId.target.value)
      "
    >
      Save
    </button>
  </div>

TS File

saveProduct(name: string, price: string, id: number) {
var newProduct: Product = new Product();
newProduct.productId = Math.floor(Math.random() * 100);
newProduct.productName = name;
newProduct.productCatId = id;

}

Answer №1

The reason is that the target is present on the event, not on your specific element.

It is recommended to use $event.target.value instead:

    <button
      class="btn btn-success"
      (click)="
        SaveProduct(productName.value, productPrice.value, $event.target.value)
      "
    >

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

I am having trouble locating the name 'React' within the function variable when using Typescript with generic arguments

Is there a way to store a typescript function with generic arguments in a variable? function identity<T>(arg: T): T { return arg; } I attempted to do it like this but got an error message saying Cannot find name 'React' const identity = ...

What are the typical scenarios where Angular's DI resolution modifiers are used?

Recently, I delved into the world of resolution modifiers, but I am struggling to grasp their practical application in my project. It appears that they are mainly used when dealing with services and requiring different instances of them in various parts of ...

Navigating through the dependencies within an Angular library

I have come across a few sources mentioning the use of tsconfig paths in libraries. I attempted to configure it, but unfortunately, my project refuses to compile. The complete path to my services is example-project/projects/example-project/src/lib/_core/se ...

Bootstrap Modal - Preselected Dropdown Option

When using Bootstrap Modal, I am encountering an issue where the default option is not being displayed correctly. Instead of "Please Select" appearing as the default choice in the drop-down, it is showing up as "A" by default. Below is the HTML code snip ...

Typescript's Intersection Types: The Key to Overlapping Properties

Looking to create a type-safe utility function in Typescript 4.0 for comparing properties of two objects, my initial code snippet is below: export function propertiesMatch<O extends object, T extends O, S extends O>(first: T, second: S, props: (keyof ...

Changing the names of properties within a intricate JSON structure

I have a JSON data structure that is quite complex, like the one shown below: const json = '{"desc":"zzz", "details": { "id": 1, "name": "abc", "categoryDetails": { "cid": ...

Achieve triple condition handling using *ngIf else technique

My goal is to suggest nearby establishments to the user based on their location. I need to handle two scenarios: The user has allowed access to their geolocation The user has not granted access to their geolocation While checking if the geolocation ser ...

Having trouble grasping this concept in Typescript? Simply use `{onNext}` to call `this._subscribe` method

After reading an article about observables, I came across some code that puzzled me. I am struggling to comprehend the following lines -> return this._subscribe({ onNext: onNext, onError: onError || (() => {}), ...

Leverage Formidable to directly stream content to Azure Blob Storage without the need to save it in the /tmp directory

An interesting example provided by Formidable can be found here: https://github.com/node-formidable/formidable/blob/master/examples/store-files-on-s3.js. It showcases how to upload a stream to an S3 bucket without saving the content to a temporary file, wh ...

What is the best way to incorporate Electron browser windows within Angular-CLI components?

How can I use electron browser window inside components in angular-cli if it doesn't accept it? I encountered an error with fs.existsync. Are there any alternative options to integrate electron with angular2 components? var electron = require(&apos ...

What could be the reason for Angular's version being indeterminate?

After attempting to determine the angular version of my current project using ng version, I received the following results: Angular CLI: 8.2.1 Node: 10.16.0 OS: win32 x64 Angular: undefined I am now unsure how to identify the exact version of Angular bei ...

Angular date control and its corresponding date panel are not properly aligned on the user interface

I am utilizing Angular and Angular Material for date control display. See the code snippet below: <input type="date" (change)="validateDateRange($event,true, index)" class="form-control oot-start-date align-middle" name=& ...

Unleashing the power of RXJS: Leveraging IntervalObservable coupled with the

I recently incorporated HTTP pooling into my Angular application using IntervalObservable and startWith for immediate activation. I'm curious to know if IntervalObservable waits for the initial/previous call to finish streaming data. Also, is there a ...

Adding a line break ( ) in a paragraph within a TypeScript file and then transferring it to HTML does not seem to be functioning properly

Angular Website Component: HTML file <content-section [text]="data"></content-section> TypeScript file data = `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's stand ...

What potential consequences could arise from me removing the node_modules folder?

Every time I try to install a package using npm, I encounter an error. When I run my application with ng serve, it shows an error message saying Error: Type [packageName] does not have 'ɵmod' property. What steps should I take to resolve this is ...

When the form field is double-clicked, it automatically populates with information, but unfortunately it does not meet the

Presented below is a formgroup configuration: this.order = new FormGroup({ City: new FormControl('', Validators.required), Street: new FormControl('', Validators.required), DateOfDelivery: new FormControl('', Vali ...

Why does my error handler log errors in the console instead of the response?

This is my first time asking a question here, so please forgive me if I make any mistakes. I am open to suggestions on how to improve my question-asking skills. I am facing an issue with my error handler not displaying the message in the response; instead ...

Pulling the month name based on a specific year and week using Javascript

In my HTML form, there are two fields called Year and Week. When the user chooses a Year and Week from the dropdowns, I would like to show the corresponding Month Name for that specific year and week. Is there anyone who can assist me in retrieving the m ...

What is the correct way to make a GET request with parameters included?

In order to retrieve data from an API using a declarative approach, you can define it in the service like this: getItems$ = this.httpClient.get<Item[]>(this.url); You can then either subscribe to it or use async in the consuming component. If the A ...

Transforming Typescript Strings into ##,## Format

As I've been using a method to convert strings into ##,## format, I can't help but wonder if there's an easier way to achieve the same result. Any suggestions? return new Intl.NumberFormat('de-DE', { minimumFractionDigits: 2, max ...