Angular2 allows for the firing of all columns in one click using *ngFor

<tr *ngFor = 'let student of students>
<td  contenteditable="true"  class ='phone' #button>
{{student.phone}}
<i (click)='showbox()' class = '    glyphicon glyphicon-edit'></i>
<input *ngIf='showinput' type="text"   
   class="phone form-control required email "  style="height:38px;">
</td>
</tr>


showbox(){
  this.showinput = true;
}

Whenever the <td> is clicked, it should open an input tag. However, currently, clicking on one column opens it for other columns as well. Can anyone offer some guidance on how to resolve this issue?

angulartypescript

Answer №1

Within the component, there is a variable called showinput being declared.

When you click on the td tag, the value of this variable changes correctly. However, since the context is the component, it affects every td within the component.

If you only want the variable to impact a specific td, then use the student variable for the context.

<td  contenteditable="true"  class ='phone' (click)='showbox(student)' #button>{{student.phone}}
         <input *ngIf='student.showinput' type="text" [(ngModel)] = 'student.phone' class="phone form-control required email " style="height:38px;">
    </td>

Component:

showbox(student) {
    student.showinput = true;
}

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

How to capture a screenshot of the current screen using Nativescript programmatically

After taking a screenshot in a NativeScript app, is there a way to display a popup asking if the user wants to save the picture? I attempted using the 'nativescript-screenshot' plugin, but it only copies elements within the application: nat ...

javaandroidangulartypescriptnativescript

Nested validation schema featuring conditional validation - yes, we've got it covered!

In my Formik object, I have set initial values as follows: {customerDetails: {id: "", name: "", mobileNumber: ""}, notes: {id: "", text: "", type: ""}} How can I create a conditional Yup validati ...

reactjstypescriptformikyup

The checkbox filter in Angular 6 has the ability to replace the previously selected

I've been working on creating a filter system using checkboxes. Below is a snippet of the code I'm currently using: filter.pipe.ts import { Pipe, PipeTransform, Injectable } from '@angular/core'; @Pipe({ name: 'filter2' }) ...

javascripthtmlangularfilter

The Disabled element does not exhibit effective styling

When we include the disabled attribute in the text element, the style does not work. Can you explain why? <input pInputText [style]="{'padding-bottom':'10px','padding-top':'10px','width':'100%&apos ...

htmlcssangularinternet-explorertypescript

Can someone guide me on finding my staticwebapp.config.json within Azure Devops for deploying Azure Static Web Apps during a release?

After setting up a pipeline to build the artifact for my Angular application, I encountered an issue with deployment where specific URLs would redirect me to a 404 error page. This problem seems to be related to the configuration in staticwebapp.config.jso ...

angularazure-devopsazure-static-web-appazure-static-web-app-routing

Encapsulating functions with multiple definitions in Typescript

Struggling with wrapping a function that can have multiple return types based on input parameters in Typescript. Imagine wanting a function to return ReturnA for VariantEnum.a and ReturnB for VariantEnum.b. Consider this implementation of sampleFunction: ...

typescript

Storing information from a mat-select element in MongoDB database

I have a collection of Players and Teams. I want to assign players to teams. In my HTML, I create a Team form where users can select players to load: <mat-form-field> <mat-select placeholder="Goalkeepers" formControlName="goalkeeper"> & ...

node.jsangularmongodbexpress

I am curious if there is a method to obtain the component's logic or the value of an element's style within animation metadata in Angular

Is there a way to determine the height of a dynamically created component from a recursive tree without using the tree inside metadata declarations? One possibility is calculating the height inside the *ngStyle directive as shown below: <my-directory [ ...

angularcss-animationsangularjs-animationangular2-animation

What is the best way to retrieve a value from an array of objects containing both objects and strings in TypeScript?

Consider this scenario with an array: const testData = [ { properties: { number: 1, name: 'haha' } , second: 'this type'}, ['one', 'two', 'three'], ]; The goal is to access the value of 'second&ap ...

typescripttypestypeerror

Displaying Image Preview in Angular 2 After Uploading to Firebase Storage

At the moment, I am facing an issue where the uploaded image is not being displayed after the uploadTask is successful. This problem arises due to the asynchronous loading nature of the process, causing the view to attempt to display the image before the u ...

javascriptangularfirebasefirebase-storage

Tips for incorporating user access control logic into a lazy-loaded Angular Monorepo application without embedding the logic in the main application

In our current project, we are developing an Angular application utilizing the Angular monorepo structure. This setup includes a parent application and several children applications, with the parent application located in the `app` folder and the children ...

javascriptangularangular-routing

How can you generate a distinct id value for each element within an ngFor iteration in Angular 4?

I encountered an issue where I must assign a distinct id value to each data row within my *ngFor loop in angular 4. Here is the code snippet: <div *ngFor="let row of myDataList"> <div id="thisNeedsToBeUnique">{{ row.myValue }}</div> & ...

htmlangulartypescript

What is the syntax for adjusting background-position with ngStyle in Angular 4?

It's finally Friday! I'm a bit confused about how to properly set the background-position-x property in an [ngStyle] directive in Angular 4 with Ionic 3. Can someone guide me on the correct way to implement background-position-x? I expect the ou ...

angulartypescriptionic3

Exploring Rxjs repeatwhen with a delay in action

I'm struggling to understand how repeatWhen and delay() work together. If you want to see my issue in action, click on this link and make sure to open the console. I tried using takeWhile to stop the repeatWhen stream before it gets to the delay ope ...

angularrxjs

What is the best way to format this DateTime for a more visually appealing appearance within an Angular Material <mat-card-subtitle>?

My date looks like this: 2000-12-16T00:00:00 When displayed in Material code (as the publish_date): <mat-card *ngFor="let book of bookItems"> <mat-card-header > <mat-card-title>{{book.title | titlecase}}</mat-card-title> ...

angularvisual-studiodatetime

If either the form is invalid or has been submitted, disable the button

Is there a way to either disable the button when the form is invalid or after the user clicks it, but not both at the same time? How can I incorporate two statements inside the quotes for this purpose? I attempted the following code, but it didn't w ...

htmlangularionic4

Event callback type narrowing based on the specific event key

While exploring different approaches to create a type-safe event emitter, I came across a pattern where you start by defining your event names and their corresponding types in an interface, as shown below: interface UserEvents { nameChanged: string; ...

typescript

Loading data from a remote source in an Angular 6 material table: A step-by-step guide

I'm currently puzzled by the usage of the material table schematic and am struggling to find a solution. It appears that the key aspect lies within the connect() method present in the datasource.ts file. Simply put, this.data is merely an array. / ...

angularangular-materialobservableangular-material2angular2-observables

What is the correct method for typing a React functional component with properties?

Here's a react functional component I have created... const MyFunction = () => { // lots of logic MyFunction.loaded = someBoolean; return <div>just one line</div> } MyFunction.refresh = () => ....... I added two properti ...

reactjstypescript

Combining multiple forms in Angular 8页面

In my Angular 8 project, I am working on creating a registration/login screen with some animation effects when switching between the two forms. Each form has its own validation rules using form groups. However, I have encountered an issue where the registr ...

angular