Angular 2: Utilize the select event to fetch and return the selected item

How can I pass an item on change event?

Currently, my code looks like this:

<select #sel (change)="select.emit(sel.value.url)">
        <option  *ngFor="let item of selectlist">
            {{item.description}}
        </option>
    </select>

However, what I really want is to receive the entire "item" object back when there's a change.

I should receive something like:

{ value: 0, description: 'Home', url: '' }

but instead, all I get is 'Home'.

Here is my complete array data:

public  pagelist:Array<Object> = [
      {
        value: 0, 
        description: 'Home',
            url: 'http://www.color.com'
      },
      {
        value: 1, 
        description: 'Tours',
        subpage: [{
                    value: 0, 
                    description: 'Italy'
                 },
                 {
                    value: 0, 
                    description: 'France'
                 },
                 {
                    value: 0, 
                    description: 'London'
                 }]
      },
      {
        value: 1, 
        description: 'About us',
            url: 'http://www.color.com'
      },
            {
        value: 1, 
        description: 'Contact us',
            url: 'http://www.color.com'
      }

  ];

Answer №1

Make sure to update your code with this:

<select #selection (change)="selected.emit(selections[$event.target.value])">
    <option [value]='i' *ngFor="let item of selections; let i = index;">
        {{item.name}}
    </option>
</select>

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

What is the best way to test a callback function of a React component that is encapsulated with withRouter()?

In my Jest and Enzyme testing of a TypeScript-written React project, I have a component wrapped in a React-Router router. Here's a snippet of the code: import { SomeButton } from './someButton'; import { RouteComponentProps, withRouter } fr ...

Expanding the property of an established type to a nested type

Let's talk about titles. Well, maybe not this one. I tried to come up with a good title, but it didn't work out as planned. In my coding journey, I have created a cool interface called DefaultTheme: export interface DefaultTheme { colors: ...

Leveraging Array.map within Angular Interpolation

Is it possible to achieve the following in HTML using Angular 2+? {{ object.array.map((o) => o.property ) }} Whenever I try to execute this code, it crashes the Angular application. Do I need to utilize Pipes or any other technique? ...

Facing problem with Angular 7 when making a GET request for non-JSON data

Currently, I am retrieving JSON data from a URL using the following method: this.http.get('http://localhost:3200/mydata').subscribe(data => { console.log(data); }); The response is in JSON format, and everything seems to be working fine. ...

Submitting a value to ngForm: A step-by-step guide

I am working on an ngForm within Angular Material that contains several input fields. I want to include a new field called total in the submission, but this field is not an input field. It should be a readonly field and its value needs to come from the Typ ...

Backend serving an Angular application with Spring Security configuration

As I develop a web application using Angular for the frontend and Java for the backend (using technologies like Spring Boot, Spring Security, JWT), I am facing some confusion on how these components should work together. During development mode, everythin ...

Encountering issues in d3.js following the transition to Angular 8

After upgrading my Angular 4 app to Angular 8, I encountered an issue where the application works fine in development build but breaks in production build. Upon loading the application, the following error is displayed. Uncaught TypeError: Cannot read p ...

Creating a dual style name within a single component using Styled Components

Need assistance with implementing this code using styled components or CSS for transitions. The code from style.css: .slide { opacity: 0; transition-duration: 1s ease; } .slide.active { opacity: 1; transition-duration: 1s; transform: scale(1.08 ...

Developing Angular dynamic components recursively can enhance the flexibility and inter

My goal is to construct a flexible component based on a Config. This component will parse the config recursively and generate the necessary components. However, an issue arises where the ngAfterViewInit() method is only being called twice. @Component({ ...

The validation requirement in Angular prevents the form from being considered valid until the input has been modified

I have included the HTML5 required property in the below HTML code: <div class="col-sm-3"> <label>{{question.placeholder}}<span *ngIf="question.required">*</span></label> </div> <d ...

What is the best way to import a typescript file using a provided string?

I have a directory filled with JSON schemas, all coded in TypeScript. My goal is to import them collectively while preserving the typing, instead of having to write out numerous import statements. These schemas are utilized for validating JSON data being ...

Bypass URL Routing for a specific route in Angular 8 and Apache

I currently have two Angular applications: the FrontEnd and Admin. Both of these are hosted on cPanel behind an Apache server. The website setup is as follows: mydomain.com/ ----> Frontend Angular Application mydomain.com/admin ----> Admin Angular ...

The name 'Math' is not found

Currently diving into Angular7 with the tour-of-heroes application as my guide. I've been working on the InMemoryDataService class and encountered an issue when trying to generate an ID - I keep receiving the error "[ts] Cannot find name 'Math&ap ...

Troubleshooting Problem with Angular 6 API User Interface Update

Currently, I have been focused on implementing authentication in Angular 6 utilizing sessionStorage. My challenge lies in adjusting the header display based on whether the user is logged in or not. If a user is authenticated, they should only see the Logou ...

Calculating the time difference between two dates in the format yyyy-MM-ddTHH:mm:ss.fffffff can be done by following these steps

Can someone help me figure out how to calculate the difference in days between the date and time 2021-02-23T08:31:37.1410141 (in the format yyyy-MM-ddTHH:mm:ss.fffffff) obtained from a server as a string, and the current date-time in an Angular application ...

Refresh the information in the <ion-datetime> component by utilizing the formGroup

I am currently working with a form that has been created using 'FormBuilder'. The form includes a date control and I am trying to figure out how to update the data in that control using the patchValue() method. In the template, the control has d ...

Displaying JSON data in a popup window resembling a download prompt

I'm a beginner in front end development and facing difficulty in displaying JSON in a new window. Currently, I'm allowing users to download the JSON file like this var blob = new Blob([$scope.data], {type: 'json'}); ...

Tips for detecting the end of a scroll view in a list view

I've encountered an issue with my scrollView that allows for infinite scrolling until the banner or container disappears. What I'm aiming for is to restrict scrolling once you reach the last section, like number 3, to prevent the name part from m ...

Is there a way to dynamically retrieve a JSON element in Typescript?

I am using a data grid throughout my application, and currently, I am retrieving the selected rowid with the following code. Here is the HTML snippet: <tbody> <tr *ngFor="let ddata of tableData.data; let i = index" (click)="setClickedRow(ddat ...

Definitions for nested directories within a main index.d.ts

We have developed custom typings for the latest version of material-ui@next and successfully included them in the library during the last beta release. For those interested, you can access the index.d.ts file here. However, there seems to be a problem wi ...