How to push object to a new array with button click on ngFor table in angular 8

Question

I how to arrays, one(array1) has some objects while the other(array2) has a list of objects that I want to choose from and push to array1.

.html

<div class="forArray1">
 <table >
   <tr *ngFor="list1 of array1">
       <td>{{list1.name}}</td>
       <td><button (click)=removeFunction()>Remove</button><td>
    </tr>
 <table>
</div>
<div class="forArray2">
  <table >
   <tr *ngFor="list2 of array2">
   <td>{{list2.name}}</td>
   <td><button (click)=addFunction()>Add</button><td>
   </tr>
 <table>
</div>

How to push the row object from arry2 list to arry1 list after clicking on the "Add" button on a specific object? Something like get by ID and push.

json

array1 = [
    {
     "type": "toyota", 
     "year": "2013"
    }]

***************************************

array2 = [
    {
     "type": "toyota", 
     "year": "2013"
    },
    {
     "type": "audi", 
     "year": "2010"
    },
    {
     "type": "honda", 
     "year": "2014"
    },
    {
     "type": "ford", 
     "year": "2018"
    }]

.ts

array1 = [];
array2 = [];

//add an obj to array1 and delete it from array2
addFunction() {
       //TODO
}

//it will remove the an obj from array1
removeFunction(){
      //TODO
}

How to complete the functions? Suggestion on better approach is also fine.

this has nothing to do with angular, this is just javascript ;) — AVJT82
– AVJT82, Commented Nov 13, 2019 at 12:45
if array methods are unfamiliar to you, I suggest you read up on arrays in javascript, as a whole: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — AVJT82
– AVJT82, Commented Nov 13, 2019 at 12:47
@AJT82, well sorry, I'm working on angular and this came up. — Pleasure
– Pleasure, Commented Nov 13, 2019 at 12:56

Adrita Sharma · Accepted Answer · 2019-11-13 12:50:23Z

2

Try like this:

Working Demo

.html

<div class="forArray1">
    <table>
        <tr *ngFor="let list1 of array1">
            <td>{{list1.type}}-{{list1.year}}</td>
            <td><button (click)=removeFunction(list1)>Remove</button>
            <td>
        </tr>
    </table>
</div>



<div class="forArray2">
    <table>
        <tr *ngFor="let list2 of array2">
            <td>{{list2.type}}-{{list2.year}}</td>
            <td><button (click)=addFunction(list2)>Add</button>
            <td>
        </tr>
    </table>
</div>

.ts

addFunction(item) {
    let index = this.array2.findIndex(x => x.type == item.type  && x.year == item.year)
    this.array1.push(this.array2[index])
    this.array2.splice(index,1)
  }

 removeFunction(item) {
    let index = this.array1.findIndex(
      x => x.type == item.type && x.year == item.year
    );
    this.array1.splice(index, 1);
  }

answered Nov 13, 2019 at 12:50

Adrita Sharma

22.3k11 gold badges75 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Pleasure Over a year ago

Thanks for this solution, it also works. I will vote this code, thanks!

MonkeyScript · Accepted Answer · 2019-11-13 13:00:39Z

app.component.html :

<div class="forArray1">
    <table>
        <tr *ngFor="let list1 of array1; let i=index;">
            <td>{{list1.name}}</td>
            <td><button (click)=removeFunction(i)>Remove</button><td>
        </tr>
    <table>
</div>
<div class="forArray2">
    <table >
        <tr *ngFor="let list2 of array2; let i=index;">
            <td>{{list2.name}}</td>
            <td><button (click)=addFunction(i)>Add</button><td>
        </tr>  
    <table>
</div>

app.component.ts :

addFunction(index){
    // Add selected item to first array
    this.array1.push(array2[index]);
    // Remove item from second array
    this.array2.splice(index,1);
}

removeFunction(index){
    // Replace item in second array
    this.array2.push(array1[index]);
    // Remove item from first array
    this.array1.splice(index,1);
}

I assume you want to restore a removed item back into second array. If not, just remove the line this.array2.push(array1[index]); in remove function.

Collectives™ on Stack Overflow

How to push object to a new array with button click on ngFor table in angular 8

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related