Passing variables from a template to TypeScript using ngFor

Question

Passing variables from a template to TypeScript using ngFor

Need help passing a variable from a template to typescript using *ngFor loop.

Currently, my code looks like this:

 <select (change)="onregionchange()" data-placeholder="Regions" class="form-control regions-select" id="regions" multiple>
    <option *ngFor="let region of all_regions" [value]="region.id">{{region.name}}</option>
</select>

I want to send countries for the selected region to the ts file and store them in region.countries within the onregionchange() function.

Any suggestions on how to achieve this in angular2?

angular typescript angular2-template

Answer 1

Answer №1

Ensure that when you call the onregionchange() function, all the options are passed in like this: change($event.target.options).

In your TypeScript file, make sure to extract only the selected options as you are receiving all variables. Here is an example:

onregionchange(countries) {
    this.selectedregions = Array.apply(null,countries)
      .filter(country => country.selected)
      .map(country=> country.value)
  }

You can also refer to this example for more information.

Answer 2

Ensure that when you call the onregionchange() function, all the options are passed in like this: change($event.target.options).

In your TypeScript file, make sure to extract only the selected options as you are receiving all variables. Here is an example:

onregionchange(countries) {
    this.selectedregions = Array.apply(null,countries)
      .filter(country => country.selected)
      .map(country=> country.value)
  }

You can also refer to this example for more information.

Answer 3

Answer №2

If you have an onchange handler on your select element, you can utilize it like this:

<select (change)="onregionchange()" data-placeholder="Regions" class="form-control regions-select" id="regions" multiple>
    <option *ngFor="let region of all_regions" [value]="region.id">{{region.name}}</option>
</select>

function onregionchange(e){
    console.log(e.target.value)
}

By setting the value of each option to region.id, you will be able to retrieve the selected region's ID in the event listener function. From there, you should be able to access other properties such as region.country.

Answer 4

If you have an onchange handler on your select element, you can utilize it like this:

<select (change)="onregionchange()" data-placeholder="Regions" class="form-control regions-select" id="regions" multiple>
    <option *ngFor="let region of all_regions" [value]="region.id">{{region.name}}</option>
</select>

function onregionchange(e){
    console.log(e.target.value)
}

By setting the value of each option to region.id, you will be able to retrieve the selected region's ID in the event listener function. From there, you should be able to access other properties such as region.country.

Passing variables from a template to TypeScript using ngFor

Answer №1

Answer №2

Similar questions

Sending a POST request that is attempting to insert empty values into an MS SQL database

Obtain the last used row in column A of an Excel sheet using Javascript Excel API by mimicking the VBA function `Range("A104857

Resetting the modal scroll time when the content of the modal is refreshed

Setting a default value for a select-option in Angular can be done by initializing the

What is the process for uploading an array of files with AngularFire2 and Firebase Storage?

Unable to connect dynamic information in Angular 8 component

Issues with Loading childComponent in Angular 5 Parent Component

Avoiding the restriction of narrowing generic types when employing literals with currying in TypeScript

Give the Row ID as a parameter to a personalized component within MUI Datagrid Pro

When passing the parameter in Angular, the value appears as "Ébénisterie," but in Java, it is retrieved as "Ã?bÃ©nisterie"

Unraveling the mystery of decoding a jwt token

After executing the ng serve command, I encountered the following error message: "There has been an unhandled exception - Module '../dotjs/validate' could not be found."

Issues with CORS functionality in Angular and NodeJS application causing disruptions

Leveraging Angular's capability to import files directly from the assets

I desire for it to effortlessly unlock within my matmenu as soon as the webpage loads

Troubleshooting Angular 2: (keyup) event not functioning on Tour of Heroes Tutorial

Encountered in the Angular library: NG0203 error stating that inject() should only be invoked within an injection context like a constructor, factory function, or field initializer

Dynamic Field Validation in Angular 6: Ensuring Data Integrity for Dynamic Input Fields

Establish the default landing page as the home screen when launching the application

The function type '() => JSX.Element' cannot be assigned to the type 'ReactNode'