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

Question

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?

angular typescript

Answer 1

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;
}

Answer 2

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;
}

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

Answer №1

Similar questions

Is the Prisma model not reachable through Prisma Client?

Verify if the array entries match

Is it feasible to select which modules to be loaded into the application?

Pause the execution at specific points within Typescript files by utilizing breakpoints when debugging with an attached debugger in VsCode

Could someone assist me in identifying the issue with this logfile and guiding me in the correct direction?

Are SCSS style sheets being properly included in ng-packagr packaging?

Setting a timer in NGRX to control the interval between two actions

When accessing an Angular 7 page directly through the URL in the browser, it becomes unresponsive. However, the page works perfectly fine when navigating

Unraveling the mysteries of an undefined entity

Getting the hang of using and translating typescript .tsx files with jsx in React-native

Vercel deployment encountered an AxiosError with a status code of 404

Help with Material-UI: Passing unique props to a custom TreeItem component

Determine the dynamic height of content in a TypeScript file

Activating the loader dismiss command will transition the swiper to the current page

Angular Material card layout design

Tips for successfully passing the dynamic state and setState to a function in typescript

The image will not appear until the Angular code has been recompiled or the server has been rebooted

Error in the design of PrimeNg calendar rendering in Angular 2

Error: Trying to access a property of an undefined variable (retrieving 'x')

Tips for utilizing Provide/Inject in Vue.js while leveraging TypeScript