Retrieving the user's choice from a list generated by ngFor

After attempting to implement this code, I'm running into some issues. It seems like I might be missing a key step.

HTML:

<ng-container *ngFor='let parts of parts$'>
      <a class="list-group-item list-group-item-action" (click)="onCategorySelect($event)" value= "parts.Category">{{parts.Category}}</a>
    </ng-container>

.TS:

  parts$: Parts[];
  selectedCategory: Parts[];
  constructor(private ApiService:ApiService) { }

  ngOnInit() {
    return this.ApiService.getParts().subscribe(data => {this.parts$ = data});
  }

  onCategorySelect($x: any){
    this.selectedCategory = this.parts$.filter(element => element.Category === $x.target.value);
  }

I am trying to retrieve the specific category that users select from the list.

Answer №1

To activate the click function, simply input the specified value like this:

<ng-container *ngFor='let parts of parts$'>
  <a class="list-group-item list-group-item-action" (click)="onCategorySelect(parts.Category)" value= "parts.Category">{{parts.Category}}</a>
</ng-container>

// Within the component

onCategorySelect(category: any){
  this.selectedCategory = category;
}

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'm receiving an error message stating that 'This command is not available when running the Angular CLI outside a workspace,' even though I am in the correct folder

Upon starting my Angular project, which I cloned from GitHub and initiated using the command line "ng serve" or "ng serve -o", I encountered the following error: "Error: This command is not available when running the Angular CLI outside a workspace." My pr ...

A useful tip for adding an active class during navigation with router.navigate() in Angular

How can I add an active class based on the route when navigating to another route using router.navigate() Here is the template code: <div class="row"> <div class="col-lg-7"> <div class="row" *ngFor ...

Loading the static content page in Ionic can be slower the first time on a mobile device

My static page contains over 300 lines of text within the HTML file. <ion-content> <p text-warp> //my text with </p> </ion-content> When I view this page in my browser, it loads immediately. However, ...

Unable to retrieve shared schema from a different schema.graphql file within the context of schema stitching

In my project, I have a user schema defined in a file named userSchema.graphql; id: String! userName: String! email: String! password: String! } In addition to the user schema, I also have separate schema files for login and register functionalit ...

Generating a compressed tar.gz file with a version-specific name using Angular CLI post-build

Here's what I'm trying to do: I want to generate a .tar.gz file once my project is built, and I need the name of the file to be based on the version of the project. I attempted using npm pack, but it only takes the name of the dist folder and cr ...

Enhancing Responses in NestJS with External API Data

I'm a beginner in NestJs, Graphql, and typescript. I am trying to make an external API call that is essentially a Graphql query itself. The goal is to modify the response, if necessary, and then return it for the original request or query, in this ca ...

Encountering "Duplicate identifier" issues when using Angular2 and TSD

I am currently in the process of migrating a project from Angular 1 to Angular 2. The project involves client and server code, with some shared components. My goal is to implement Angular 2 on the client side by following the guidelines outlined in the ng2 ...

Tips for updating state in React TypeScript 2.0?

Working with a small component built using React and TypeScript has presented a unique challenge. interface Props { } interface State { isOpen: boolean; } class App extends React.Component<Props, State> { constructor(props: Props) { super ...

What potential issues should I be aware of when I install new node packages?

I encountered an error message when trying to install a Node Package. Running npm install shows that everything is up to date. https://i.stack.imgur.com/d78hf.png ...

IntelliSense is failing me. I am unable to find information on DOM/CSS types

In the midst of starting my inaugural TypeScript project, I encountered a rather selective compiler: let test = <div style={{textAlign:'right'}}>Text</div>; // OK let right = 'right'; let test2 = <div style={{textAlign: ...

Tips for creating a seamless horizontal scrolling effect in Angular when hovering (automatically)

One of the components I'm working on features a gallery with an X axis orientation. <div class="gallery"> <div (mouseenter)="scrollTo('left', $event)" (mouseleave)="clearIntervalRepeater()" class="left"></div> < ...

Type parameters in TypeScript components

Below is the code snippet I am working with: const pageArea = (Component,title) => ({ ...props }) => { <Component {...props} /> } This works fine in JavaScript, but I am looking to convert it to TypeScript. This is what I have tried: functio ...

Typescript's puzzling selection of the incorrect overload

I have a method structured as shown below: class Bar { public executeInWorker(cb: () => void): void; public executeInWorker(cb: () => Promise<void>): void | Promise<void>; public executeInWorker(cb: () => void | Promise< ...

Using `it` with accessing class members

When testing whether a specific object/class is correctly wired up, I often utilize it.each to prevent writing repetitive tests. The issue arises when the type of the object doesn't have an index signature, requiring me to cast it to any for it to fun ...

Can TypeScript be imported into HTML to set a color value or modify a color value from HTML using TypeScript?

I've been working on this code for a couple of days now. Utilizing Angular to develop a web application, I am trying to change the color of certain numbers when they reach a specific value. For example, if num > 45 then color = green, otherwise col ...

Error encountered when initializing a variable within the constructor of a TypeScript file in Angular 4

This is the content of my app.component.html file PL Auth Username: Password : Generate OTP Enter OTP : Login This is the code in my app.component.ts file import { Component, OnInit } from '@angular/core' ...

Navigating the Angular Element: A Guide to Clicking Buttons within Modal-Dialogs Using Protractor

I am currently creating an automation test for an angular application using the protractor framework. Test scenario: Click on the "Create PDF Report" button A modal-dialog window will appear Click on the "Run Report Now" button within the modal-d ...

Is there a way to adjust the width of a table cell in Material UI using React?

I encountered a problem where I am attempting to adjust the width of a table cell, specifically in Typescript. However, I am only able to choose between medium and small sizes for TableCellProps. Is there a workaround for this issue? I am looking to expand ...

Updating displayed content based on orientation switch

Two components, A and B, are displayed simultaneously - A on the left and B on the right - when the device is in landscape mode. In portrait mode, either A or B will be displayed based on user selection. The components can transition from A to B and vice v ...

In Angular, the dropdown in reactive forms will not populate unless there is some interaction with the form

I'm facing an issue with a form that includes 3 dropdowns getting data from an API. The problem is that the dropdowns do not bind data unless I click on them (blur on any field in the form). Here is my HTML: <form [formGroup]="dropdownsForm&q ...