Instructions on utilizing interpolation to transfer a value as an argument to a function

What is the correct way to insert the {{c.id}} argument into the function instead of hardcoding it as 32?


<tr *ngFor="let c of myService.companyList">
    <td>{{c.name}}</td>
    <td>{{c.email}}</td>
    <td>{{c.password}}</td>
    <td> <input type="submit" value="click to remove" (click)="removeCompany(32)" (click)=/> </td>
    <td> <a href="">Click here to remove this company {{c.id}}</a></td>
  </tr>

Answer №1

Simply:

(press)="deleteCorp(c.id)"

Answer №2

When using *ngFor, remember to pass your local variable with an object value. In this case, use c.id which holds the id.

<tr *ngFor="let c of myService.companyList">
    <td>{{c.name}}</td>
    <td>{{c.email}}</td>
    <td>{{c.password}}</td>
    <td> <input type="submit" value="click to remove" (click)="removeCompany(c.id)" (click)=/> </td>
    <td> <a href="">Click here to remove this company {{c.id}}</a></td>
</tr>

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

angular2 and ionic2 encounter issues when handling requests with observable and promises

I am attempting to trigger an action once a promise request has been resolved, but I'm having trouble figuring out how to achieve this. After doing some research, I learned that Ionic2 storage.get() returns a promise, and I would like to make an HTTP ...

The dimensions of the d3 div remain constant despite any modifications to its attributes

In my angular application, I am trying to customize the width and height of div elements in d3 when I select a legend. Strangely, I am able to adjust the width and height of the svg element without any issues. Here is the issue illustrated: https://i.ssta ...

Test fails in Jest - component creation test result is undefined

I am currently working on writing a Jest test to verify the creation of a component in Angular. However, when I execute the test, it returns undefined with the following message: OrderDetailsDeliveryTabComponent › should create expect(received).toBeTru ...

Adding comments in TypeScript: A quick guide

Hey there, I'm new to TS and could use some help. Here is the code snippet I have: I want to comment out the logo but adding "//" and '/*' doesn't seem to work. This is what I tried: // <LogoComponent classes={{container: style.log ...

Angular doesn't support this particular type as an injection token

I'm attempting to create a constructor with a type of string, but I keep encountering the following error: This particular type is not supported as an injection token @Injectable({providedIn: 'root'}) export class DataService { const ...

Unsuccessful try to retrieve data from database using Angular 8 and PHP

UPDATE! The retrieved data is visible in preview, but nothing appears on the HTML page. https://i.sstatic.net/qXuZV.png UPDATE2! for Acuaohttps://i.sstatic.net/Pq772.png I am trying to display OS Categories from my DB https://i.sstatic.net/PoBvg.png but ...

Looking to redirect data from ngonInit() to an export class? Find out more information below

Within my ngOnInit() function, I have a logic that fetches data from a backend and assigns it to the variable this.chartOptions.series[0]['data']. This variable acts as a reference to populate my Highcharts data within the export class. To provid ...

Implementing React Router with dynamic parameters in the root element

I'm in the process of transforming an ASP.NET MVC application to utilize React with Redux in TypeScript. I've opted for React Router for handling the routing, with a necessary parameter in the root URL to specify the customer's organization. ...

How do I modify the local settings of the ngx-admin datepicker component to show a Turkish calendar view?

Looking for tips on customizing the new datepicker component in Nebular ngx-admin. Specifically, I want to change the local settings to display the calendar as Turkish. Explored the library but still seeking alternative methods. Any suggestions? ...

The Vitest test is not compatible with PrimeVue3 Dialogs and does not function as intended

I am currently working on a project that involves using PrimeVue components, and the time has come to conduct some tests. Below is the code for the test: import { beforeEach, describe, expect, it } from 'vitest' import type { VueWrapper } from & ...

TypeError: describe is not a function in the Mocha testing framework

Encountering an issue with mocha-typescript throwing an error indicating that describe is not defined. TypeError: mocha_typescript_1.describe is not a function at DatabaseTest.WrongPath (test/database_test.ts:21:9) at Context.<anonymous> ...

Developing a Data Generic State Management System in Angular using TypeScript

Implementing a Generic StateManagierService that can handle any type, allowing users to receive new state and data upon state change. However, something seems to be missing. export class StateManagierService<T> { private _state$: BehaviorSubject< ...

"Can you guide me on how to invoke a parent function from retryWhen in Angular

I'm struggling to figure out how to execute a function from retryWhen and then call the parent function once retryWhen is done. Any ideas on how I can achieve this? getStatuses(statusesType: string[]): Observable<IStatus[]> { let body ...

Create a one-of-a-kind Angular 6 material table component featuring unique custom columns

My goal is to streamline the process of creating custom material tables by using a specialized table component that allows me to quickly generate unique tables for different data sources with built-in pagination and sorting. All I need to provide are the d ...

Can the dimensions of a dialog be customized in Angular Material Design for Angular 5?

I am currently developing a login feature for an Angular 5 application. As part of this, I have implemented an Angular Material Design popup. Within the dialog screen, I have a specific process in place: The system checks the user's email to determi ...

Checking an Angular 2 Component with Constructor Argument

Imagine having an Angular 2 Component containing two input parameters: @Component{... (omitted for clarity)} export class SomeComponent { @Input() a: number @Input() b: number } When needing to test this component, the process typically involves someth ...

Checking React props in WebStorm using type definitions

Currently, I am utilizing WebStorm 2018.3.4 and attempting to discover how to conduct type checking on the props of a React component. Specifically, when a prop is designated as a string but is given a number, I would like WebStorm to display an error. To ...

Tips for creating basic Jasmine and Karma tests for an Angular application to add an object to an array of objects

I have developed a basic Angular project for managing employee data and I'm looking to test the addProduct function. Can someone guide me on how to write a test case for this scenario? I am not using a service, just a simple push operation. Any assist ...

Stop unnecessary updating of state in a global context within a Functional Component to avoid re-rendering

I am currently working with a Context that is being provided to my entire application. Within this context, there is a state of arrays that store keys for filtering the data displayed on the app. I have implemented this dropdown selector, which is a tree s ...

How do I resolve the issue of 'filter' not being recognized on type 'Observable<Event>'?

Hey there, everyone! I'm facing an issue with integrating a template into my Angular project. It seems that the filter function is no longer available in the Observable library (Update from 10 to 11?). I attempted to use pipe as a solution, but as a ...