Binding data in Angular 2 to an element other than an input

Angular 2 Version:rc.1

I have a table displaying names and places using *ngFor, and I need to bind the clicked cell's data to a variable in my component.

component.html

<tr *ngFor="let result of Results$">
  <td #foo (click)="passValue(foo)">
    {{result?.name}}
  </td>
  <td>
    {{result?.place}}
  </td>
</tr>

component.ts

passValue(foo) {
  this.value = foo;
  console.log(foo);
}

When I click on a cell with "John" as its value, the console displays:

<td _ngcontent-pof-13="">
    John
</td>

Is there a way to only log "John" instead of the entire td element?

If you have any suggestions or better solutions, please share!

Answer №1

<tr *ngFor="let item of Items$">
   <td #bar (click)="setValue(bar)">

#bar in this case serves as a template reference variable that points to the actual DOM element. The variable item refers to the data being bound - for example, an object with a name field containing "Sarah":

Therefore, update

<td #foo (click)="passValue(foo)">  // displays the td element 

to:

<td #foo (click)="passValue(item?.name)"> // shows "Sarah"

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

Unresolved conflict stemming from an HTML closing tag in the index.html file, despite both source and destination files being identical

I am currently facing a challenge while trying to merge my code with the master branch through a pull request. The conflict arises in the src/index.html file, specifically on line 17 which states </html> needs to be corrected to </html>. It&apo ...

How do I determine which radio button is currently selected within my Angular2 application?

In my HTML, I have the following radio buttons: <div class="col-lg-4" id="radioButtons"> <form action=""> <fieldset id="capacity"> <legend>capacity</legend> <label for="input-ao">< ...

Tips for preventing a wrapped union type from collapsing

It seems like there is an issue with Typescript collapsing a wrapped union type when it knows the initial value, which is not what I want. I'm uncertain if this is a bug or intended behavior, so I'm curious if there's a way to work around it ...

Using child routes in eager loaded components can be achieved without making any changes to

In many tutorials, I have noticed that RouterModule.forChild(..) is commonly used for lazy loading. However, I am of the opinion that this forChild method can also be utilized for eager loading. Its advantage lies in the fact that routes can be configured ...

What are the steps to utilize dismissableMask feature in PrimeNG?

Trying to hide a dialog by clicking outside of it seems tricky with PrimeNG's dismissableMask. Does anyone have a solution for this? HTML Code <button type="text" (click)="showDialog()" pButton icon="fa-external-link-square" label="Show"></ ...

Validator checking the status of an Angular form

Currently working on developing a custom form validator. In my test component, there are three checkboxes. The main form should only be considered valid if at least one checkbox is checked. https://stackblitz.com/edit/stackblitz-starters-69q3rq Within th ...

Analyze the information presented in an HTML table and determine the correct response in a Q&A quiz application

I need to compare each row with a specific row and highlight the border accordingly: <table *ngFor="let Question from Questions| paginate: { itemsPerPage: 1, currentPage: p }"> <tr><td>emp.question</td></tr> <tr> ...

What is the process of converting a union type into a union of arrays in TypeScript?

I have a Foo type that consists of multiple types For example: type Foo = string | number I need to receive this type and convert it into an array of the individual types within the union type TransformedFoo = ToUnionOfArray<Foo> // => string[] ...

What is the best way to run tests on customized Material-UI components with withStyles using react-testing-library?

Creating a test with a styled Material-UI component using react-testing-library in typescript has proven to be challenging, particularly when trying to access the internal functions of the component for mocking and assertions. Form.tsx export const style ...

Utilizing Generics in TypeScript to Expand Abstract Classes

How can I define the property eventList in the class ImplTestClass to be an array with all possible values of AllowedEvents, while extending the class TextClass that accepts T? I'm stuck on this one. If anyone can provide guidance on how to achieve t ...

Ways to fix: Encountering an Unexpected token < in JSON at position 0

Hey there! I've just started dipping my toes into the MEAN stack. I'm currently using Angular to connect to an api.js file, which in turn connects to my mongodb database. However, I've come across this error: ERROR SyntaxError: Unexpected t ...

zod - Mastering the Art of Dive Picking

Working with zod and fastify, my UserModel includes the username and device properties. The username is a string, while the device consists of "name", "id", and "verified" fields in an object (DeviceModel). For the sign-up process, I need to return the co ...

Is there another way to implement this method without having to convert snapshotChanges() into a promise?

When trying to retrieve cartIdFire, it is returning as undefined since the snapshot method is returning an observable. Is there a way to get cartIdFire without converting the snapshot method into a promise? Any workaround for this situation? private asyn ...

Stage setting timeout for the playwright

const test = defaultTest.extend({ audit: async ({ page }) => { await page.screenshot({ path: 'e2e/test.png' }); console.info('audit done!'); }, }); // ...more code test.only('audit', async ({ page, mount, audi ...

Ionic: Automatically empty input field upon page rendering

I have an input field on my HTML page below: <ion-input type="text" (input)="getid($event.target.value)" autofocus="true" id="get_ticket_id"></ion-input> I would like this input field to be cleared eve ...

Utilizing ngx-translate in Angular6 to dynamically load translations by making an API request to the backend

Using ngx-translate in my frontend, I aim to dynamically load translations upon app launch. The backend delivers a response in JSON format, for example: { "something: "something" } Instead of utilizing a local en.json file, I desire to integrate thi ...

The conversion of an array to Ljava/lang/Object is not possible

I'm currently working on a project using NativeScript app with TypeScript where I am trying to pass an array of android.net.Uri to a function. However, when attempting to do so, I encounter an error mentioning that the 'create' property does ...

Redirecting to login on browser refresh in Angular using Firebase's canActivate feature

An Angular 5 authentication application using angularfire2 and Firebase has been developed. The app functions correctly when navigating through in-app links. However, an issue arises when refreshing the browser, as it redirects back to the Login page even ...

Dynamic rendering of independent routes is achieved by nesting a router-outlet within another router-outlet

I am working on an angular 2 project with multiple modules. To load each module, I am using the lazy loading technique in this way: { path: 'home', loadChildren: './dashboard/dashboard.module#DashboardModule' }, Currently, I am facing ...

How to retrieve information from JSON files utilizing arrays

I have a JSON object that contains connection points data in an array. Here is an example of the structure: assetType : "this" connectionPoints:Array(1) type:{name: "Structure", In my TypeScript file, I am handling this data like so (entity represents ...