CODEWITHSUNDEEP
angular
MikePR
MikePR

Reputation: 2986

Angular: Push, then remove an item

This might be seen as a duplicated of Angular - push object to list of objects

I am trying to push a new object to a list and then delete it.

component.ts file:

  newActivity: Activity = {
    id: 0,
    description: '',
    type: { id: 0, description: '' },
  };

In my HTML file I am applying binding so that newActivity property is populated correctly. I then call a WebApi service to save it. Right after that I have the following code:

  this.myActivityService.saveActivity(this.newActivity).subscribe(
   //CODE TO handle success or error
  );

  this.listOfActivities.push(this.newActivity);

  this.resetNewActivity();

where resetNewActivity() method is:

    resetNewActivity(): void {
    this.newActivity.id = 0;
    this.newActivity.description = '';
    this.newActivity.type = { id: 0, description: '' };
  }

The newActivity object is added to the list using array's push(). However, as soon as the resetNewActivity() method is executed, the new Activity that was added to the list is reset as well.

How, can I isolated the reset method from the item that was added to the list of activites?

Upvotes: 0

Views: 459

Answers (3)

Eliseo
Eliseo

Reputation: 57961

when you make push(this.newActivity) push the same object always, so you can use spreadOperator push({...this.newActivity,type:{...this.newActivity.type}}) to create a different object or some type of deep copy of object

A silly example in stackblitz

newActivity= {
    id: 0,
    description: '',
    type: { id: 0, description: ''},
  };
  listOfActivities: any[] = [];
  click(){
    this.listOfActivities.push({...this.newActivity,type:{...this.newActivity.type}})
  }
  change()
  {
    this.listOfActivities[0].type.id=10;
  }

<pre>
  {{listOfActivities|json}}
</pre>
<button (click)="click()">add</button>
<button (click)="change()">change</button>

Upvotes: 0

UniCoder
UniCoder

Reputation: 3233

Few things to be considered here:

  • You should not assign id value manually, should be generated uniquely and dynamically. check the working solution.
  • Modularity should there when you code something and focus on loosely coupled with single responsibility.
  • If the above two things are taken care, your life will be easy and you can reset your object in a single line of code.

check the working solution and try to run from menu options then open console to see the results.

working Solution in Typescript playground

Upvotes: 0

user11855261
user11855261

Reputation: 

resetNewActivity(): void {
    this.newActivity = new Activity();
}

(or)

resetNewActivity(): void {
    this.newActivity = {
        id: 0,
        description: '',
        type: { id: 0, description: ''},
    };
}

you will have to assign a new object in resetNewActivity() as modifying the attributes of existing object will modify wherever it has been added.. to lists or display or anywhere...

This is not a concept specific to Angular, this is in general for all object oriented programming...

Upvotes: 1

Related Questions