Issue with editing images on the Angular front-end platform

Question

Issue with editing images on the Angular front-end platform

Currently, I am developing a web application where I can input user information such as name, last name, age, birth date, and a picture. After creating a user, I should be able to delete or edit their details. However, I encountered an issue when updating a user's picture – instead of replacing the existing picture, a new user is being created with the modified image.

You can access the project on StackBlitz using this link: https://stackblitz.com/~/github.com/simeonskiq/Angular-project

edit-user.component.ts :

// Code for the EditUserComponent TypeScript file
// Includes form handling, user updates, and file upload functionality
// Problem: Updating user picture creates a new user instead of modifying existing one

user.service.ts :

// Code for the UserService TypeScript file
// Manages user data, including adding, updating, and deleting users
// Issue: Updating user picture results in creation of new user instead of updating existing one

I have tried various solutions without success. My goal is to successfully update a user's picture without creating a duplicate user.

angular angularjs typescript frontend

Answer 1

Answer №1

Within the add-user component, you have implemented code that assigns an event listener to the confirmation modal button to trigger this.confirmAddUserAndNavigate():

  ngAfterViewInit(): void {
    const confirmModalElement = document.getElementById('confirmModal');
    if (confirmModalElement) {
      const saveButton = confirmModalElement.querySelector('.btn-primary');
      if (saveButton) {
        saveButton.addEventListener('click', () => {
          this.confirmAddUserAndNavigate();
        });
      }
    }
  }

However, there is already an existing function bound to the click event in the HTML template. Consequently, this results in double calls to addUser() whenever the button is clicked.

<div class="modal-footer">
   <button type="button" class="btn btn-secondary" (click)="cancel()">Cancel</button>
   <button type="button" class="btn btn-primary" (click)="confirmAddUserAndNavigate()">Save</button>
</div>

Answer 2

Within the add-user component, you have implemented code that assigns an event listener to the confirmation modal button to trigger this.confirmAddUserAndNavigate():

  ngAfterViewInit(): void {
    const confirmModalElement = document.getElementById('confirmModal');
    if (confirmModalElement) {
      const saveButton = confirmModalElement.querySelector('.btn-primary');
      if (saveButton) {
        saveButton.addEventListener('click', () => {
          this.confirmAddUserAndNavigate();
        });
      }
    }
  }

However, there is already an existing function bound to the click event in the HTML template. Consequently, this results in double calls to addUser() whenever the button is clicked.

<div class="modal-footer">
   <button type="button" class="btn btn-secondary" (click)="cancel()">Cancel</button>
   <button type="button" class="btn btn-primary" (click)="confirmAddUserAndNavigate()">Save</button>
</div>

Answer 3

Answer №2

Here are the issues I identified in your code snippet.

Make sure to always have a value inside the return of the of statement, otherwise the subscribe block won't execute.

Service

updateUser(updatedUser: User): Observable<null> {
  const index = this.users.findIndex(user => user.id === updatedUser.id);
  if (index !== -1) {
      this.users[index] = { ...this.users[index], ...updatedUser };  // Merge existing user data with updated data
  } else {
      console.error('User not found, cannot update');
  }
  return of(null);
}

There is unnecessary code in the ngAfterViewInit method. Using event bindings is sufficient in Angular applications, so the addEventListener is not needed. I have commented out this code for you.

Add User Component

ngAfterViewInit(): void {
  // const confirmModalElement = document.getElementById('confirmModal');
  // if (confirmModalElement) {
  //   const saveButton = confirmModalElement.querySelector('.btn-primary');
  //   if (saveButton) {
  //     saveButton.addEventListener('click', () => {
  //       this.confirmAddUserAndNavigate();
  //     });
  //   }
  // }
}

If you are satisfied with the changes, please proceed with creating a pull request and merging the code. Additionally, I have included a .gitignore file in my latest commit for your reference.

Explore the Github Repository

Answer 4

Here are the issues I identified in your code snippet.

Make sure to always have a value inside the return of the of statement, otherwise the subscribe block won't execute.

Service

updateUser(updatedUser: User): Observable<null> {
  const index = this.users.findIndex(user => user.id === updatedUser.id);
  if (index !== -1) {
      this.users[index] = { ...this.users[index], ...updatedUser };  // Merge existing user data with updated data
  } else {
      console.error('User not found, cannot update');
  }
  return of(null);
}

There is unnecessary code in the ngAfterViewInit method. Using event bindings is sufficient in Angular applications, so the addEventListener is not needed. I have commented out this code for you.

Add User Component

ngAfterViewInit(): void {
  // const confirmModalElement = document.getElementById('confirmModal');
  // if (confirmModalElement) {
  //   const saveButton = confirmModalElement.querySelector('.btn-primary');
  //   if (saveButton) {
  //     saveButton.addEventListener('click', () => {
  //       this.confirmAddUserAndNavigate();
  //     });
  //   }
  // }
}

If you are satisfied with the changes, please proceed with creating a pull request and merging the code. Additionally, I have included a .gitignore file in my latest commit for your reference.

Issue with editing images on the Angular front-end platform

Answer №1

Answer №2

Service

Add User Component

Explore the Github Repository

Similar questions

Display errors on form fields upon form load using Angular schema form

Sending data from an Angular 2 application to a Spring MVC Rest API using HTTP POST method

Utilize NodeJS and Typescript to input data into a postgreSQL database

I can see the JSON data printing to the console in Ionic 3, but it doesn't display on

What is the best way to find a specific field within an array of objects using Ionic/AngularJS?

Determining the name of the currently focused DOM element in Angular2

Is it necessary to verify the apiKey or does the authentication of the user suffice for an HTTPS callable function?

manipulator route in Nest.js

Using import statement is mandatory when loading ES Module in TS Node: server/src/index.ts

Is there a way to send a Razor boolean variable to an Angular directive?

methods for extracting JSON key values using an identifier

What is the Angular alternative to control.disable when working with a QueryList?

Issues encountered with incorporating 'angular-route' or even 'angular-ui-router'

Make the current tab the active tab with the help of AngularJS

What to do when encountering error TS2339: Property 'tz' is not found on type 'Moment'?

Transform a string into a boolean value for a checkbox

Troubleshooting: Problems with AngularJS $http.get functionality not functioning as expected

Determine the index of a specific character within a string using a "for of" loop

Material 3 Web Components definitions for SolidJS

Transfer highlighted checkboxes between two containers. Any deselected checkboxes in the second container should also be removed from the initial container