Using Angular 2, you can pass an object as a parameter to a function

Is there a way to pass an object as a parameter in the DOM on this forum?

Within my HTML code, I have the following:

<div class="list-items">
    <ul>
        <li *ngFor="let i of item">
            <span  (click)="onAdd({{newUser.username}},{{i}})" 
                   class="glyphicon glyphicon-plus">
            </span>
                {{ i.name }}
        </li>
    </ul>
</div>

I am encountering errors with both {{newUser.username}} and {{i}}. My main concern is about passing the {{i}} element.

typescriptangular

Answer №1

If you want to include variables in your template, simply use string interpolation with double curly braces {{variable}}. But for bindings and events, you can directly incorporate them like this:

<button (click)="onSubmit(user.name, index)" 
      [someProperty]="foobar" class="material-icons">
</button>

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

Avoiding Overload Conflicts: TypeScript and the Power of Generic Methods

I have created an interface type as follows: interface Input<TOutput> { } And then extended that interface with the following: interface ExampleInput extends Input<ExampleOutput> { } interface ExampleOutput { } Additionally, I ha ...

typescriptgenericstypes

How do I customize the alert in ion-select using IONIC ANGULAR?

How can I create a select element like this: Is it possible to customize the selected item? I'm new to working with Ionic. I've tried using custom properties, but they don't seem to work as expected. I also attempted a fake select by using ...

iosangularionic-frameworkmobile

Angular 17 SSR Swiper 11: Why aren't the breakpoints functioning as expected?

I'm currently struggling with implementing breakpoints in the swiper code. Despite multiple efforts, I have not been able to successfully integrate the breakpoints, and it seems like the functionality is not working as intended. I'm reaching out ...

angularserver-side-renderingswiper.jsangular17angular17-ssr

Upon clicking the button, the Angular Mat-Table with Reactive Forms fails to display any data, instead adding a blank row accompanied by errors

When the AddRow_click() function is executed, I populate the insuranceFormArray and assign its values to the datasource. However, after adding an entry, an empty row appears in the table, and error messages are displayed in the console. Only a subset of th ...

angulartypescriptangular-materialangular-reactive-formsmat-table

Changing Angular 6 form groups into query parameters for GET requests

Question: I need to retrieve information from a Web API using a GET request, with the parameters being in filter form. The request is straightforward: filterEvents() { this.http .get(environment.apiUrl + 'events/GetFilteredAxmCardsId' ...

angularrestangular6

When it comes to passing prop values through functions, TypeScript types do not provide suggestions

I'm struggling to find a way to ensure that developers have suggested types for specific props in my component, regardless of how they pass data to the prop. For example, when I directly pass an array of values to the prop: <Component someProp={[{ ...

reactjstypescript

What causes a folder to disappear after rerunning in nest.js?

When working on my project using nest.js in MacOS Sonoma, I encountered a problem where the image folder src/products/images gets deleted after every project rerun (npm start). The images are saved like this: for (const image of images) { const fileName ...

node.jstypescriptfilenestjs

Transforming API response data into a Typescript object using React mapping

When I make an API call, the response data is structured like this: [ { "code": "AF", "name": "Afghanistan" }, { "code": "AX", "name": "Aland Islands" } ...

reactjstypescriptreact-typescript

Ways to access a property within an object using TypeScript

Can you help me extract the "attributes" array from this object and store it in a new variable? obj = { "_id": "5bf7e1be80c05307d06423c2", "agentId": "awais", "attributes": [ // that array. { "created ...

angulartypescript

What happens when Angular elements don't have an injector?

Exploring Angular's custom elements while steering clear of dependency injection is my current experiment. const MyElementElement = createCustomElement(MyElementComponent, { injector }); customElements.define('my-element', MyElementElement) ...

angulartypescript

Implementing Angular with HTML progress bar for interactive client-side features

Exploring the integration of HTML built-in progress bars with Angular: <label for="file">File progress:</label> <progress id="file" max="100" value="70">30%</progress> I am curious about how ...

htmlangularprogress-bar

Is it possible for me to employ T extends Contravariant<any> to effectively restrict a generic type to a union of Contravariants

Let's begin by clarifying some terms: type Contravariant<T> = (t: T) => void; declare let cNum: Contravariant<number>; declare let cStr: Contravariant<string>; Now, suppose I wish to create a function that accepts an array of the ...

typescripttypescript-generics

What is the best way to accurately parse a Date object within a TypeScript class when the HttpClient mapping is not working correctly?

Task.ts: export class Task { name: string; dueDate: Date; } tasks.service.ts: @Injectable() export class TasksService { constructor(private http: HttpClient) { } getTasks(): Observable<Task[]> { return this.http.get<Ta ...

jsonangulartypescript

Embark on a journey through a preorder traversal of a Binary Tree using TypeScript

Hello! I've been tasked with creating a function that iterates over a binary tree and returns all its values in pre-order. Here is the code snippet: interface BinTree { root: number; left?: BinTree; right?: BinTree; }; const TreePreArray ...

javascripttypescript

Attempting to install angular-in-memory-web-api using npm, but encountering various errors in the process

When trying to install angular-in-memory-web-api using npm, an error with code ERESOLVE occurred. The dependency tree could not be resolved, causing a conflict. While resolving dependencies for the project, it was found that @angular/common version ~13. ...

angularnpmangular-in-memory-web-api

Ways to transfer information among Angular's services and components?

Exploring the Real-Time Binding of Data Between Services and Components. Consider the scenario where isAuthenticated is a public variable within an Authentication service affecting a component's view. How can one subscribe to the changes in the isAut ...

javascriptangulartypescriptionic-frameworkdata-binding

The content displayed in the PrimeNG p-table is limited to only the table name with no additional information

After upgrading Angular to version 9, I switched from p-dataTable to p-table in PrimeNG. With a table named users, I intended to display them on the screen upon rendering the view using the following HTML: users = ['one','two','thr ...

htmlangularprimeng

Show information in a table based on a unique identifier

I am working with some data that looks like this [ { date: '20 Apr', maths: [70, 80.5, 100], science: [25, 20.1, 30] }, { date: '21 Apr', maths: [64, 76, 80], science: [21, 25, 27] }, ]; My goal is to present ...

javascriptarraysangulartypescript

What is the best way to pass only the second parameter to a function in TypeScript?

Let's consider a TypeScript function as shown below: openMultipleAddFormModal(commission?: Commission, people?: People): void { // some data } To make a parameter optional, I have added the Optional Chaining operator. Now, how can I modify the code ...

javascripttypescript

What is the reason why the [active] attribute does not function properly in <a mat-tab-link> in Angular?

<div class="d-flex d-column themed-tab-nav"> <nav mat-tab-nav-bar color="primary" [tabPanel]="tabPanel" mat-stretch-tabs="false" mat-align-tabs="start"> <a mat-tab-l ...

angularangular-materialnavbar