Guide to implement editable columns in Angular 4 with a click functionality

Question

Guide to implement editable columns in Angular 4 with a click functionality

I have a table displaying records using ngFor, and I am looking to enable editing of a column upon clicking it.

<tr *ngFor="let cd of descriptionCodes; let i = index">
  <td><input type="checkbox"></td>
  <td>
    {{cd.code}}>
  </td>
  <td>
    <select class="form-control border-gray" id="codeType" [(ngModel)]="cd.codeType.id" (change)="onCodeTypeChange(i, cd.id)" [ngModelOptions]="{standalone: true}">
      <option *ngFor="let type of codeTypes" [ngValue]="type.id">{{type.name}}</option>
    </select>
  </td>
  <td>{{cd.description}}</td>
</tr>

I am aiming for the functionality where clicking on a code or description should make it editable. Also, I want only one field to be editable at a time, meaning that selecting another field should disable editing on the previously edited field.

Any suggestions would be greatly appreciated!

angular typescript

Answer 1

Answer №1

To indicate the status of a column, you should have a property that does so and then set it during the click event of the td element.

Here is an example code snippet:

<tr *ngFor="let cd of descriptionCodes; let i = index">
 <td><input type="checkbox"></td>
 <td (click)="setCodeEdit(i)">
   <span *ngIf="!cd.canEditCode">{{cd.code}}></span>
   <input *ngIf="cd.canEditCode" type="text" class="form-control"  />
 </td>
 <td>
   <select class="form-control border-gray" id="codeType" 
  [(ngModel)]="cd.codeType.id" (change)="onCodeTypeChange(i, cd.id)" 
   [ngModelOptions]="{standalone: true}">
  <option *ngFor="let type of codeTypes" [ngValue]="type.id">{{type.name}}
    </option>
   </select>
  </td>
  <td (click)="setDescEdit(i)">
   <span *ngIf="!cd.canEditDesc">{{cd.description}}></span>
   <input *ngIf="cd.canEditDesc" type="text" class="form-control"  />
 </td>
 </tr>

In the component's implementation:

setCodeEdit(index){
  this.descriptionCodes.forEach(t => t.canEditCode = false)
  this.descriptionCodes[i].canEditCode=true
}

setDescEdit(index){
  this.descriptionCodes.forEach(t => t.canEditDesc= false)
  this.descriptionCodes[i].canEditDesc=true
}

I trust this information proves beneficial!

Answer 2

To indicate the status of a column, you should have a property that does so and then set it during the click event of the td element.

Here is an example code snippet:

<tr *ngFor="let cd of descriptionCodes; let i = index">
 <td><input type="checkbox"></td>
 <td (click)="setCodeEdit(i)">
   <span *ngIf="!cd.canEditCode">{{cd.code}}></span>
   <input *ngIf="cd.canEditCode" type="text" class="form-control"  />
 </td>
 <td>
   <select class="form-control border-gray" id="codeType" 
  [(ngModel)]="cd.codeType.id" (change)="onCodeTypeChange(i, cd.id)" 
   [ngModelOptions]="{standalone: true}">
  <option *ngFor="let type of codeTypes" [ngValue]="type.id">{{type.name}}
    </option>
   </select>
  </td>
  <td (click)="setDescEdit(i)">
   <span *ngIf="!cd.canEditDesc">{{cd.description}}></span>
   <input *ngIf="cd.canEditDesc" type="text" class="form-control"  />
 </td>
 </tr>

In the component's implementation:

setCodeEdit(index){
  this.descriptionCodes.forEach(t => t.canEditCode = false)
  this.descriptionCodes[i].canEditCode=true
}

setDescEdit(index){
  this.descriptionCodes.forEach(t => t.canEditDesc= false)
  this.descriptionCodes[i].canEditDesc=true
}

I trust this information proves beneficial!

Answer 3

Answer №2

To retain cell data, store properties like isedit or editable. Upon clicking on a cell, set isedit to true and insert a new tag within the cell with *ngIf="cell.isedit". Within this tag, include an input or select element. Perform specific actions upon change or blur events, such as setting isedit to false or sending an update request.

Answer 4

To retain cell data, store properties like isedit or editable. Upon clicking on a cell, set isedit to true and insert a new tag within the cell with *ngIf="cell.isedit". Within this tag, include an input or select element. Perform specific actions upon change or blur events, such as setting isedit to false or sending an update request.

Answer 5

Answer №3

To start, you need to extract the checkbox value by:

Utilizing HTML

<tr *ngFor="let cd of descriptionCodes; let i = index">
  <td><input type="checkbox" (change)="checkboxFunction($event)"></td>
  <td>
      <input type="text" class="form-control" value="{{cd.code}}" [readonly]="readOnly" />
  </td>
  <td>
    <select class="form-control border-gray" id="codeType" [(ngModel)]="cd.codeType.id" (change)="onCodeTypeChange(i, cd.id)" [ngModelOptions]="{standalone: true}">
      <option *ngFor="let type of codeTypes" [ngValue]="type.id">{{type.name}}</option>
    </select>
  </td>
  <td>  <textarea type="text" class="form-control" value="{{cd.description}}" [readonly]="readOnly"></textarea>
</td>
</tr>

In your Typescript file:

Using TS

checkboxFunction(event){
   if(event.target.checked){
this.readOnly = 'true';
}
}

Answer 6

To start, you need to extract the checkbox value by:

Utilizing HTML

<tr *ngFor="let cd of descriptionCodes; let i = index">
  <td><input type="checkbox" (change)="checkboxFunction($event)"></td>
  <td>
      <input type="text" class="form-control" value="{{cd.code}}" [readonly]="readOnly" />
  </td>
  <td>
    <select class="form-control border-gray" id="codeType" [(ngModel)]="cd.codeType.id" (change)="onCodeTypeChange(i, cd.id)" [ngModelOptions]="{standalone: true}">
      <option *ngFor="let type of codeTypes" [ngValue]="type.id">{{type.name}}</option>
    </select>
  </td>
  <td>  <textarea type="text" class="form-control" value="{{cd.description}}" [readonly]="readOnly"></textarea>
</td>
</tr>

In your Typescript file:

Using TS

checkboxFunction(event){
   if(event.target.checked){
this.readOnly = 'true';
}
}

Guide to implement editable columns in Angular 4 with a click functionality

Answer №1

Answer №2

Answer №3

Similar questions

Angular 5 - Empty array containing objects has a length of zero

Substitute a specific text within an array of strings using Angular 2

Issue: The 'async' pipe was not found after updating to AOT and IVY

Error: Unable to Locate Module (Typescript with baseUrl Configuration)

Is there an issue with the newline character ` ` not functioning properly in TypeScript when used with the `<br/>` tag?

Adding a # before each routing path: A step-by-step guide

What is the best way to design a basic server component that has the ability to retrieve data in NextJS 13?

Embedding a component inside another layout component in Angular

Setting dynamic values for SASS mixins in Angular 2 with Ionic 2

The Node.js express seems to be unable to fetch the css and js files

Having trouble invoking the "done" function in JQuery following a POST request

Turn off the touch events system for Ionic 2 on the leaflet map's draw controller

What is the proper method for typing unidentified exports that are to be used in TypeScript through named imports?

Currently in motion post file selection

What could be causing the error in the console when I try to declare datetime in Ionic?

Dealing with Angular CORS Problems While Sending Successive Requests

Creating a regular expression to capture a numerical value enclosed by different characters:

Setting up TypeScript to function with Webpack's resolve.modules

Turn off integrity verification for local dependencies in package-lock.json

Splitting the div into two columns