I am facing an issue with a table in my component that contains multiple records. Whenever I try to edit a specific row by clicking the edit button, it ends up making all rows editable instead.
Here is how my table looks:
The problem lies in the fact that when I click on the edit button within the table, it makes all rows editable. You can see the code on StackBlitz here.
Instead of having all rows become editable, I only want the clicked row to be editable. How can I achieve this?
To indicate if a row is being edited, I recommend setting a property on each row as demonstrated below:
https://stackblitz.com/edit/angular-usbhmd
For those who prefer not to click the link, here's the code.
Html
<table class="table table-hover">
<thead>
<tr>
<th>Domain</th>
<th>Registered Date</th>
<th>Action</th>
</tr>
<tr *ngFor="let domain of domains; let i = index">
<td>
<span *ngIf="!domain.editable">{{domain.name}}</span>
<input type="text" class="form-control" [(ngModel)]="domain.name" *ngIf="domain.editable"/>
</td>
<td>
<span *ngIf="!domain.editable">{{domain.reg_date}}</span>
<input type="date" class="form-control" [(ngModel)]="domain.reg_date" *ngIf="domain.editable"/>
</td>
<td><button class="btn btn-primary" (click)="editDomain(domain)">Edit</button></td>
</tr>
</thead>
<tbody>
</tbody>
</table>
Component
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular';
domains = [];
isVisible : boolean = false;
constructor(){
this.domains = [
{
"_id" : "12323vdfvd234",
"name" : "sixlogs.com",
"reg_date" : "2018-04-04",
"editable": false
},
{
"_id" : "12323vdfvd234",
"name" : "avanza.com",
"reg_date" : "2019-04-04",
"editable": false
},
{
"_id" : "12323vdfvd234",
"name" : "tps.com",
"reg_date" : "2018-04-04",
"editable": false
},
{
"_id" : "12323vdfvd234",
"name" : "utf.com",
"reg_date" : "2019-04-04",
"editable": false
}
]
}
editDomain(domain: any){
domain.editable = !domain.editable;
}
}
Included in the domains array is the editable property that toggles when the editDomain function is triggered by clicking the button. By utilizing the editable property, you can update your view to show input fields for each row.
the row's index should be utilized
data's editable attribute is usually not accessible
In my React-Admin v3 project, I had a functional component that looked like this: import ClearIcon from '@mui/icons-material/Clear' import DoneIcon from '@mui/icons-material/Done' import get from 'lodash/get' import { BooleanF ...
I have a vue2 application and I am looking to incorporate TypeScript into some service files without modifying the existing js/vue files. To enable TypeScript support, I utilized vue-cli which allowed me to successfully add a myService.ts file containing ...
My goal is to verify the Alcohol ID and Alcohol Name for emptiness. Below is the format I am working with: { "barId": "string", "barName": "string", "drinksItems": [ { "alcoholId": "string", "alcoholName": "string", "mixerLis ...
Using Adonisjs v5 The controller command works fine with: node ace make:controller Posts However, the new model creation command is not working: node ace:make model Post When running the make model command, an error occurs: An error message stating &ap ...
I followed the official Clipanion documentation for creating a CLI tool () and even cloned an example from here - https://github.com/i5ting/clipanion-test, but I'm facing issues when trying to execute my commands. It seems like I might be struggling ...
Here are two arrays that I have: X = [ { "id": "123a", "month": 5, "markCount": 75 }, { "id": "123b", "month": 6, "markCount": 85 ...
Currently, I am in the process of developing a test application using Angular. The challenge arises when I attempt to retrieve data through a Get request and then return a value based on that data. The code snippet below outlines the scenario: public getN ...
When a payment is successfully made using the LemonSqueezy API, a webhook sends a payload. However, I am encountering an issue with verifying the signature. For more information, you can refer to this documentation: Below is my TypeScript code for a post ...
Currently, I am utilizing BaQend and Ionic2 to implement certain tasks at the start of my application. 1. Database Readiness Instead of repeating this process on every page: ionViewCanEnter(): Promise<baqend> { // Verify Baqend SDK readine ...
I'm trying to retrieve the most recent result for each unique name using javascript. Is there a straightforward way to accomplish this in javascript? This question was inspired by a similar SQL post found here: Get Latest Rates For Each Distinct Rate ...
While working on implementing a commandBus, I encountered an issue when trying to register command types with command handlers for mapping incoming commands. My approach was to use register(handler : typeof Handler, command : typeof Command), but it result ...
I am curious to know if tree-shaking occurs during Angular 8 development mode. When running the following command: ng build I understand that tree-shaking happens when I use the command below: ng build --optimization=true|false ...
During the course of my project, I have encountered a perplexing situation that is difficult to comprehend. My intuition tells me that the issue lies in a peculiar nuance of javascript while I am working in TypeScript. Unfortunately, I am unable to prove t ...
Within my Angular application, there exists a service responsible for retrieving data from a server. load.service.ts: load = new Observable(observer => { console.log('load function called'); // asynchronous tasks with time delay obser ...
Trying to showcase the contents of object within an array. However, unable to showcase any results. Why is this happening? This is what I've attempted so far: Demo available here: https://stackblitz.com/edit/ionic-dsdjvp?file=pages%2Fhome%2Fhome.ts ...
Is there a recommended method for verifying if a variable has a value in TypeScript 4.2? My variable may contain a boolean value. I'm thinking that using if(v){} won't suffice as the condition could be disregarded if it's set to false. ...
I've been grappling with a persistent issue regarding the creation of custom elements dynamically in React TypeScript. If you're curious, you can check out the question here. const generalButtons: MenuButton[] = [ { text: "New Cl ...
My NodeJS application is written in TypeScript and utilizes the Express framework. I'm looking to host it on the GCP cloud using the gcloud app deploy command. First, I compile my TS sources to JavaScript - is this the correct approach? Afterwards, I ...
Struggling to create a custom directive in Ionic that won't resize automatically? I can't figure out what's going wrong. Here's the code snippet from my project, which is an Ionic 3 app with Angular 4: import { Directive, HostListener ...
Currently facing some challenges while attempting to integrate node-vibrant into my Angular 7 project: -Successfully imported with import * as Vibrant from 'node-vibrant';, but encountering a warning in VS Code: Module '"/Users/xxxx/Docume ...