What is the best way to successfully pass the desired value to the Angular 4 controller by clicking the button?

Here is some HTML code that I am working with:

 <div class="btn-group" role="group" aria-label="Basic example" *ngFor="let techlist of technology">
    <button type="button" class="btn btn-secondary" (click)="resList()">{{techlist.TechnologyRouteTitle}}</button>
  </div>

I have a view model for the technology data:

public ComponentTypeId: number;
public ComponentTypeTitle: string;
public TechnologyRouteId: number;

There are currently 4 elements with unique TechnologyRouteKeys. Upon clicking one, I need to load a list of technologies. For this, I have implemented the following function:

  resList(): void {
    this.TestService.getResearchList(this.filterResearchList)
      .then(response => {
        this.technology = response.Object;
      });
  }

The filterResearchList view model looks like this:

public CompanyId: number;
public TechnologyRouteKey: string;

The company ID remains constant, however, I need to dynamically change the TechnologyRouteKey based on which button is clicked. I've been struggling with this for an hour and it's not working. Any suggestions on how I can approach this?

angulartypescript

Answer №1

When passing a value, make sure to include it as an argument in the click function like this: 

(click)="resList(argument)" //in the template HTML file

This means that it should look like this if I am understanding correctly (checking the click function where I passed the route id):

<div class="btn-group" role="group" 
     aria-label="Basic example" *ngFor="let techlist of technology">
    <button type="button" class="btn btn-secondary" 
      (click)="resList(techlist.TechnologyRouteId)">
               {{techlist.TechnologyRouteTitle}}</button>
  </div>

And in the TS file:

 resList(argument): void {
 }

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

Using services in Angular 6 CLI with dynamically added components

One of my recent projects involved creating a directive in Angular 6 called 'DeleteDirective' and integrating it with a service called 'DeleteService' to enable the deletion of items from the application. Once an item is deleted (handle ...

javascriptangular

How can you customize the appearance of the filledInput component within a TextField component in Material UI?

I need some guidance on how to change the color of the FilledInput component within a TextField. Unlike InputProps, FilledInputProps are not directly accessible for styling with classes. Any suggestions on how I can customize the styling of the FilledInpu ...

javascriptreactjstypescriptmaterial-uijss

The intricacies of Mongoose schemas and virtual fields

I'm currently working on a NodeJS project using TypeScript along with Mongoose. However, I encountered an issue when trying to add a virtual field to my schema as per the recommendations in Mongoose's documentation. The error message stated that ...

node.jstypescriptmongodbmongoose

The problem with the Custom Select Component: Error Arises When Utilizing the Generic Type <T,> with a Comma as Opposed to <T> Without a Comma

I recently developed a unique custom select component that extends the standard HTML select element. During the process, I made use of a generic type to accommodate a wide range of data types, but encountered an unexpected error. The issue seems to persist ...

reactjstypescripttypescript-typingstypescript-generics

Tips for obtaining the most recent HTML element in Angular

I was able to include HTML content in an Angular (7) UI using the DomSanitizer this.sanitizer.bypassSecurityTrustHtml("htmlstr") Once the content is sanitized and displayed in the HTML view, users have the ability to modify the values as desired ...

htmlangulartypescript

Tips for integrating yarn add/npm install with monorepositories

I am attempting to retrieve a node package from a private monorepo on GitHub, structured similarly to this: monorepoProject --- subProjectA --- subProjectB Both subProjectA and subProjectB are TypeScript projects, following the layout depicted below: ...

node.jstypescriptgitnpmmonorepo

Angular 2 component hierarchy with parent and child components

Currently, I am in the process of learning typescript and angular2. My attempt to incorporate parent and child components into my fiddle has not been successful. Despite conducting some research, I have encountered an error that states: Uncaught ReferenceE ...

htmlangulartypescript

Change the color of the Parent Menu when a childMenu is clicked on using CSS and HTML

<li class="btn-group" mdbDropdown> <a mdbDropdownToggle id="ParentId"> <i class="nav-item"></i> MainMenu <i class="fa fa-angle-down"></i> </a> <div class=" ...

htmlcssangularbootstrap-4scss-mixins

Is there a way to retrieve a compilation of custom directives that have been implemented on the Vue 3 component?

Is there a way to retrieve the list of custom directives applied to a component? When using the getCurrentInstance method, the directives property is null for the current component. I was expecting to see 'highlight' listed. How can I access the ...

typescriptvue.jsvuejs3vue-composition-api

What could be causing my Ionic button to not initialize in the expected state while using ngIf with a boolean property connected to an Ionic checkbox?

I'm currently in the process of setting up a list of ingredients with checkboxes and conditional buttons, but I'm facing some challenges with the default state. Ideally, I only want the button to be visible when the checkbox is unchecked so that ...

javascripthtmlangularionic-frameworkangular-ng-if

How to assign a value to a component variable using props in Vue.js

I am attempting to assign a props value to my component variable. Below is the code I'm working with: export default { props: { // eslint-disable-next-line vue/require-default-prop multiPaginatedTableTitle: { type: Stri ...

typescriptvue.js

Unlock the canGoBack feature in your Ionic 5 app with these simple steps!

I'm currently working on implementing a back button in my Ionic app, but I am running into an issue. I need to hide the back button when it's at the root level, which is dynamic and can change based on the flow of the app. I came across some code ...

angularionic-frameworkionic4

Can an interface be designed to have the option of containing either one property or another?

I am in need of an interface that resembles the following structure: interface EitherOr { first: string; second: number; } However, I want to make sure that this interface can only have either the property first or second. Do you think achieving this ...

typescript

What is the method for including a TabIndex property in a JSON file?

https://i.sstatic.net/ISi72.png I discussed the integration of HTML fields within a JSON file and highlighted how to utilize the TabIndex property effectively in JSON files. ...

c#htmlangulartypes

Nextjs and Typescript are giving me an error that says, "The property 'nextUrl' is not found on type 'IncomingMessage'." What could be causing this

I'm currently utilizing the Next.js API route and attempting to retrieve the request parameters: export const GET = async (req: IncomingMessage) => { const matchString: String = req.nextUrl.searchParams.get("data") } I assume the typ ...

typescripthttpnext.js

The multiline feature of tooltip on mat-table cell is malfunctioning

I adjusted the mat-tooltip to be displayed as multiline using the following style in the global CSS: .mat-tooltip-class-here { white-space: pre-line !important; } Interestingly, this formatting works on span and button elements but not on mat cells. ...

cssangulartooltipmat-table

The swipe motion will be executed two times

By pressing the Circle button, the Box will shift to the right and vanish from view. Further details (FW/tool version, etc.) react scss Typescript framer-motion import "./style.scss"; import React, { FunctionComponent, useState } from &q ...

reactjstypescriptframer-motion

Convert the HTML string received from the backend API into an image and display it within the Angular mat-card

Currently, I am working on a project that involves using CK editor to create a template. The HTML string is saved in nodejs and then retrieved through a get API. My goal is to display this HTML string as an image inside a mat-card. I have attempted using h ...

javascriptnode.jsangularckeditorhtml-to-image

Export both the enum and default function in the Typescript declaration for uuidv5

My goal is to create a Typescript Declaration for uuidv5, my first declaration for a 3rd party module. The structure of the module is unfamiliar to me, as it looks like this: function uuidToString(uuid) { } function uuidFromString(uuid) { } function cre ...

node.jstypescriptnode-modules

Having trouble getting navigation to work using react-navigation and typescript in a react-native project?

Currently, I am exploring the use of TypeScript in my React Native project for the first time. While I have a basic understanding of TypeScript, I am encountering some issues with third-party libraries like react-navigation. My project consists of parent ( ...

reactjstypescriptreact-native