Tips for preserving updates following modifications in Angular 5/6?

Question

Tips for preserving updates following modifications in Angular 5/6?

I'm currently working on enhancing the account information page by implementing a feature that allows users to edit and save their details, such as their name. However, I am encountering an issue where the old name persists after making changes. Below is the snippet of my code for reference:

<div >
    <mat-form-field class="simple-form-field-50" *ngIf="isEditEnable">
      <input matInput placeholder="Name" [(ngModel)]="name">
    </mat-form-field>
    <span *ngIf="!isEditEnable">Name : {{user?.givenName}} </span>
    <button style="border:0;" *ngIf="!isEditEnable" (click)="onEdit()"><span><mat-icon style="font-size:16px;" matSuffix>create</mat-icon></span></button>
    <button *ngIf="isEditEnable" mat-raised-button color="primary" (click)="onEdit()">Submit</button>
</div>

TS code:

export class ProfileComponent implements OnInit {
  user: User;

  constructor(
    private http: HttpClient,
    ) { }

  isEditEnable = false;

  ngOnInit() {
    this.http.get<User>('/api/user/details', {})
        .subscribe((user) =>  {
          this.user = user;
        });
  }
  onEdit() {
  this.isEditEnable = !this.isEditEnable;
  }
}

Code Ouput:

[1] (https://i.stack.imgur.com/8Rbzz.png)

Upon clicking on the edit button:

[2] (https://i.stack.imgur.com/J7qCr.png)

Despite submitting the changes, the old name remains unchanged:

[3] (https://i.stack.imgur.com/8Rbzz.png)

javascript angular typescript

Answer 1

Answer №1

It seems like there is an issue with updating the name property of the user and ensuring that the user is updated in the database as well (you may need to create an endpoint for this).

<div >
    <mat-form-field class="simple-form-field-50" *ngIf="isEditEnable">
        <input matInput placeholder="Name" [(ngModel)]="name">
    </mat-form-field>
    <span *ngIf="!isEditEnable">Name : {{user?.givenName}} </span>
    <button style="border:0;" *ngIf="!isEditEnable" (click)="onEdit()">
        <span><mat-icon style="font-size:16px;" matSuffix>create</mat-icon></span>
    </button>
    <button *ngIf="isEditEnable" mat-raised-button color="primary" (click)="onEdit()">
        Submit
    </button>
</div>

export class ProfileComponent implements OnInit {
    user: User;
    name: string;

    constructor(
      private http: HttpClient,
    ) { }

    isEditEnable = false;

    ngOnInit() {
      this.http.get<User>('/api/user/details', {})
          .subscribe((user) =>  {
            this.user = user;
          });
    }

    // assume you have or will add an endpoint to handle user update
    updateUser(user) {
        this.http.put((`/api/user/${this.user.id}`, this.user))
    }

    onEdit() {
        if (this.isEditEnable && this.user.givenName !== this.name) {                
                // assign new name to the user
                this.user.givenName = this.name;
                // use api update the user in your database
                this.updateUser()
        }
        this.isEditEnable = !this.isEditEnable
    }
}

In the backend portion (assuming you are using node with express maybe?), you may have a file named users.js where you define a get endpoint as follows:

this.router.get('details', someFunctionThatGetsUser);

You will also need to add another one

this.router.put('/:id', functionToUpdateUserInDB);

and include a function in your user service that updates the user in the database.

Answer 2

It seems like there is an issue with updating the name property of the user and ensuring that the user is updated in the database as well (you may need to create an endpoint for this).

<div >
    <mat-form-field class="simple-form-field-50" *ngIf="isEditEnable">
        <input matInput placeholder="Name" [(ngModel)]="name">
    </mat-form-field>
    <span *ngIf="!isEditEnable">Name : {{user?.givenName}} </span>
    <button style="border:0;" *ngIf="!isEditEnable" (click)="onEdit()">
        <span><mat-icon style="font-size:16px;" matSuffix>create</mat-icon></span>
    </button>
    <button *ngIf="isEditEnable" mat-raised-button color="primary" (click)="onEdit()">
        Submit
    </button>
</div>

export class ProfileComponent implements OnInit {
    user: User;
    name: string;

    constructor(
      private http: HttpClient,
    ) { }

    isEditEnable = false;

    ngOnInit() {
      this.http.get<User>('/api/user/details', {})
          .subscribe((user) =>  {
            this.user = user;
          });
    }

    // assume you have or will add an endpoint to handle user update
    updateUser(user) {
        this.http.put((`/api/user/${this.user.id}`, this.user))
    }

    onEdit() {
        if (this.isEditEnable && this.user.givenName !== this.name) {                
                // assign new name to the user
                this.user.givenName = this.name;
                // use api update the user in your database
                this.updateUser()
        }
        this.isEditEnable = !this.isEditEnable
    }
}

In the backend portion (assuming you are using node with express maybe?), you may have a file named users.js where you define a get endpoint as follows:

this.router.get('details', someFunctionThatGetsUser);

You will also need to add another one

this.router.put('/:id', functionToUpdateUserInDB);

and include a function in your user service that updates the user in the database.

Tips for preserving updates following modifications in Angular 5/6?

Answer №1

Similar questions

Angular generates an array that is not native to the system

Populate an HTML table using a JavaScript array containing objects

Angular not firing slide.bs.carousel or slid.bs.carousel event for Bootstrap carousel

Determining the best method for change detection in Angular 2: Choosing between Observable, EventEmitter, and Dot Rule

When utilizing styled-jsx alongside postcss, experiencing issues with styles failing to reload or rebuild

Execute a specific function when the Node.js countdown reaches zero

transferring information from a nested input field in Vue to its parent component

How can you prevent multiple instances of JavaScript objects from being disposed of after they have completed their task?

Access Flask variable in JavaScript code

What is the best way to ensure that the swf loads only after all the images and text have loaded completely

Wondering how to go back to the default locale in Next.js?

The issue with Angular's Mat Option selected values not functioning properly

What is the best way to showcase information from an external API in react js?

Creating atomic controller actions in Sails.js: A guide to optimizing your controller functions

Angular 2 is throwing an error: Unhandled Promise rejection because it cannot find a provider for AuthService. This error is occurring

Access a different tab through the utilization of JavaScript functions

Transforming react.js into HTML and CSS programming languages

Creating multi-dimensional arrays using array lists with Axios and Vue.js

What is the best way to make a Modal triggered by a loop embedded within a table function properly on mobile devices?

Extracting data from a JSON object using Angular