Transferring information from template to associated component

Question

Transferring information from template to associated component

Is it possible to transfer data from a template to a component without the need for an event trigger like a button or form submission? For instance, in the code snippet provided, how can we pass the 'item' from the 'items' array to the component?

items.html

<div *ngFor="let item of items"></div>

items.component.ts

onInit(item) {
console.log(item);
}

html css angular

Answer 1

Answer №1

If you have a list of items in your component and want to display the name of each item using a function, you could do something like this:

<div *ngFor="let item of items">
  {{showName(item)}}
</div>

In your TypeScript file:

public items = [ { id: 1, name: 'apple' }, { id: 2, name: 'banana' } ];

showName(item: any): void {
   console.log(item);
   return item.name;
}

Answer 2

If you have a list of items in your component and want to display the name of each item using a function, you could do something like this:

<div *ngFor="let item of items">
  {{showName(item)}}
</div>

In your TypeScript file:

public items = [ { id: 1, name: 'apple' }, { id: 2, name: 'banana' } ];

showName(item: any): void {
   console.log(item);
   return item.name;
}

Transferring information from template to associated component

Answer №1

Similar questions

The functionality of collapsing rows of cards in Bootstrap does not seem to work efficiently for multiple

Angular - Display shows previous and current data values

The padding of elements changes accordingly as the dimensions (width/height) of the header are adjusted

Exploring Angular 17's unique approach to structuring standalone components

What is the best way to detect a change in a property using rxjs?

Issue with Angular ngFor binding. What could be causing this error to occur?

Unable to set width for td element in media query is not functioning as expected

Problem with Bootstrap container-fluid overlapping with floated element

Implementing the Applet Param Tag using JavaScript or jQuery

What is the best way to align the main navigation at the center of

I'm curious as to why my form fields disappear even when they have not been selected

jQuery counter no longer updates when scrolling

Ways to resolve the form submission issue on ASP.NET Core 3.1 with jQuery integration

Android encountered an unknown error while trying to access the URL, resulting in an HTTP failure response with a status

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

Automatic page updates triggered by code modifications

Angular2 is throwing a TypeError, stating that OrbitControls is not a valid constructor

When viewing a webpage on a small browser, the content will automatically expand to fill the

The lower section of the scrollbar is not visible

The border is not displaying for the Child Div element