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

Methods for invoking a JavaScript function from TypeScript within an Angular2 application

Use a pipe to show the content of the md-input

What is the best way to delete a particular CSS class using jquery?

The hidden attribute of UIWebView and its interplay with JavaScript

What is the reason that I have to submit my mapped function twice in order for the updated state to show after modifying the array content?

When transitioning from another page, the header will cover a portion of the section

What could be causing the issue with this function not loading correctly the first time in Node.JS?

JavaScript array loading failed for the C# web service

Using a numeral within a Font Awesome icon symbol to customize a label for a Google Maps marker

The ngx-datatable encountered a resolution issue with its dependency tree and was unable to resolve it

Unable to add ngRoute dependency in Angular

Fetching JSON data from a Node.js server and displaying it in an Angular 6 application

The content of the served HTML Table remains static and requires a server restart for any updates to

What causes the removeChild function to exhibit distinct behaviors when it comes to list items versus i tags?

Implementing multiple perspectives on a single webpage by keeping track of the browsing history with AngularJS and leveraging the

Breaking up an array into smaller chunks with a slight twist

Ways to reduce the size of images within a bootstrap carousel

Managing errors in jQuery's .ajax function

Tips for utilizing and incorporating an icon into a specific cell within ag-grid to signify that the cell can be edited

Cannot retrieve the <li> element from the array