Guide to passing dropdown values with the each method and input decorator in Angular 14

I'm having trouble setting the dropdown values using a foreach method in my code. It seems to be loading 5 times for each dropdown, which is not what I want. I only want to display the specific value for each dropdown option (e.g. only the "Car" value for the Car dropdown). How can I achieve this?

main.component.html:

<div
  class="custom-select"
  style="width:400px;"
  *ngFor="let v of vehicle; index as i"
  >
  <p>{{ v }}</p>
  <app-vehicle [data]="travals"></app-vehicle>
</div>

Demo: https://stackblitz.com/edit/angular-ivy-yxfoyl?file=src%2Fapp%2Fmain%2Fmain.component.html

Answer №1

Is this the solution you were looking for?

car.html

<select>
  <option
    *ngFor="let carType of data; index as i"
    value="{{ carType }}"
    label="{{ carType }}"
  ></option>
</select>

dashboard.html

<div
  class="custom-select"
  style="width:400px;"
  *ngFor="let c of car; index as i"
>
  <p>{{ c }}</p>
  <app-car [data]="journeys[c]"></app-car>
</div>

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

Having trouble compiling my Angular application with success

I am working with a file named mock-values.ts. In this file, I have defined the following constants: export const TIMES: Time[] = [ { i: '8:00', v: '8' }, { i: '8:30', v: '8:30' }, { i: '9:00', v: &apo ...

How can we use Angular Table to automatically shift focus to the next row after we input a value in the last cell of the current row and press the Enter key

When the last cell of the first row is completed, the focus should move to the next row if there are no more cells in the current row. <!-- HTML file--> <tbody> <tr *ngFor="let row of rows;let i=index;" [c ...

Tsyringe - Utilizing Dependency Injection with Multiple Constructors

Hey there, how's everyone doing today? I'm venturing into something new and different, stepping slightly away from the usual concept but aiming to accomplish my goal in a more refined manner. Currently, I am utilizing a repository pattern and l ...

Angular and the challenges of connecting Facebook OAuth due to CORS problem

In my API, I have implemented OAuth login and callback methods for popular platforms such as Facebook, Google, and Twitter. The API is built using Express.js framework and it runs on port 3000. Meanwhile, I also have an Angular 2 application running on p ...

Is KeyValueDiffers within DoCheck limited to working with just a single object per component?

Initially, my ngDoCheck method worked perfectly with just this line: var productChanges = this.differ.diff(this.myProduct); Then I decided to add another object from my component and included the following line: var companyChanges = this.differ.diff(thi ...

After implementing rewrites, my dynamic routes in Next.js are no longer functioning as expected

This is the current structure of my project and it was working fine before I added rewrites to my project. https://i.sstatic.net/X989W.png -dashboard --admin --page.tsx ---[adminId] ---page.tsx --cars --page.tsx ---[carId] ---page.tsx -lo ...

"Encountering issues with Angular2's FormBuilder and accessing nested object properties,

As I dip my toes into TypeScript and Angular2, I find myself grappling with a nested object structure in an API. My goal is to align my model closely with the API resource. Here's how I've defined the "Inquiry" model in TypeScript: // inquiry.ts ...

Utilizing TypeScript's Type Inference to Simplify Function Combinations

I'm facing a challenge with what should be simple. The types aren't coming through as expected when trying to combine a couple of functions. Is there a way to have TypeScript infer the types without explicitly specifying them? import { pipe, map ...

Decoding the HTML5 <video> tag using the html-react-parser library

I'm working on a NextJS V13 app where I need to display HTML content fetched from a CMS. Instead of using dangerouslySetHtml, I opted for the html-react-parser package to parse the HTML and replace certain embedded tags like <a>, <img>, an ...

Reacting to each change event, Angular dynamically loads new autocomplete options

I am facing an issue with my form where users need to select a company using mat-select-search. Upon selection, an API call is made with the selected company ID to fetch users from that company for the autocomplete feature in recipient fields. The process ...

Incorporating a class element within an Angular 2 directive

When working with Angular 2 directives, one way to add an element is by using the following code: this._renderer.createElement(this._el.nativeElement.parentNode, 'div'); After adding the element, how can I set its class and keep a reference to ...

What is the best way to iterate through one level at a time?

Imagine a scenario where the structure below cannot be changed: <xml> <element name="breakfast" type="sandwich" /> <element name="lunch"> <complexType> <element name="meat" type="string" /> <element name="vegetab ...

What steps do I need to take to enable the about page functionality in the angular seed advance project?

After carefully following the instructions provided on this page https://github.com/NathanWalker/angular-seed-advanced#how-to-start, I successfully installed and ran everything. When running npm start, the index page loads with 'Loading...' I ha ...

What is the recommended return type in Typescript for a component that returns a Material-UI TableContainer?

My component is generating a Material-UI Table wrapped inside a TableContainer const DataReleaseChart = (): React.FC<?> => { return ( <TableContainer sx={{ display: 'grid', rowGap: 7, }} > ...

Show real-time validation messages as the form control values are updated

Instructions: Visit Plunker Locate the input box labeled 'Name' Do not enter anything in the 'Name' field Move to the 'Email' field and start typing An error message will appear for the 'Name' field as you type in ...

The error occurred because the array dimensions were found to be 3, while the estimator expected 2 or fewer dimensions. The value error was raised when attempting to use scaler.inverse_transform()

Currently, I am working on implementing a code to forecast future stock prices. While the code itself seems to be functioning well, an error arises when running the final line of code: predicted_stock_price = scaler.inverse_transform(predicted_stock_price) ...

Is having only one FCM token sufficient for storing data from multiple devices?

I'm currently working on an Angular website and looking to send push notifications to users subscribed on both desktop and mobile. I am utilizing Firebase Cloud Messaging for this purpose and wondering if storing a single FCM token will suffice for se ...

Tips for associating an id with PrimeNg menu command

Within my table, I have a list of items that I would like to enhance using PrimeNg Menu for dropdown menu options. The goal is to enable navigation to other pages based on the selected item id. When a user clicks on a menu item, I want to bind the id of th ...

Ways to access or modify variables from a different component in Angular 4 without relying on a service class

Is there a way to interact with or modify variables in another component without using a shared service? I'm dealing with two separate components in my Angular project. Keep in mind that these components are not related as Parent and Child. Compone ...

Is it possible to define an object literal type in typescript that permits unspecified properties?

I am looking to make sure that an object argument has all the necessary properties, while also allowing for additional properties. For instance: function verifyObject(input: { key: string }) : number { return input.key; } verifyObject({ key: 'va ...