Angular 2 add/remove/select all - item from array

Question

I want to make a simple selection of items - where people could select from my Array(a) and add to Array(b). Also they can remove from Array(b) and they can select all Array(a) to Array(b) - then deselect the unwanted. Simply :

1.Array(a).item.clicked --> Array(b).item added

2.Array(a).item.clicked 2nd time --> Array(b).item.deleted

3.Array(a).selectAll = Array(b) { if(selected.all) { Array(a).item.clicked --> Array(b).item.removed } }

My start (example with explanation) :

oneFunctionForAll(){
    if(clicked-first-tiem) {
      addCompare(item)
      }
    }
    if(clicked-second-time){
  removeCompore(item, i)
    }

    if(selected-all-and-clicked) {
      removeCompore(item, i)
    }

if(selected-all-and-clicked 2nd-time) {
  addCompare(item)
}

  }
  addCompare(item) {
    this.compare.push(item)
    console.log('Prideda',this.compare)
  }

  removeCompore(item, i) {
    const index = this.compare.indexOf(i)
    if (index !== -1) {
      this.compare.splice(index, 1);
    }
    console.log('triname',this.compare)

  }

HTML :

    <ion-card *ngFor="let item of jsonObj | slice:0:4; let i = index" 
class="relative" (click)="oneFunctionForAll(item,i);"> </ion-card>

If you have some ideas or done it before, I would like to see how you implemented this. I am struggling now for some reason. Please write if need more information - I will provide it.

Marian · Accepted Answer · 2018-10-23 09:00:12Z

2

Here's a very simple version: StackBlitz

I'm using Set to "toggle" items, and I have a separate function to select all items from the original array.

sourceArray = [
  'Alice',
  'Bob',
  'Charlie',
];

selected = new Set();

toggleItem(item: string) {
  if (this.selected.has(item)) {
    this.selected.delete(item);
  } else {
    this.selected.add(item);
  }
}

selectAllItems() {
  this.selected = new Set(this.sourceArray);
}

You could, if needed, also rewrite the toggleItem function to use an array as the target instead. Probably by finding trying to find the item index, and then either spliceing the selected items on that index, or adding the item instead, if it's not there yet.

answered Oct 23, 2018 at 9:00

Marian

4,0992 gold badges29 silver badges38 bronze badges

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

Comments

user4676340 · Accepted Answer · 2018-10-23 09:09:13Z

If I were you, I would use a set of observables to handle that. Angular is shipped with RxJs anyway, so you might aswell take advantage of it.

Here is an example on stackblitz :

https://stackblitz.com/edit/angular-tpuigb?file=src%2Fapp%2Fapp.component.css

Simply click on the items to mve them from a column to another.

As you can see, the code is very simple and short, and doesn't require much to work.

<h1>Click on an item to select it</h1>

<div class="container">
  <div class="values">
    <div class="value" *ngFor="let item of available$ | async" (click)="select(item)">{{ item.value }}</div>
  </div>
  <div class="selected">
    <div class="value" *ngFor="let item of selected$ | async" (click)="unselect(item)">{{ item.value }}</div>
  </div>
</div>

import { Component } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { map } from 'rxjs/operators';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  values = [
    { value: 'Lorem', selected: false, },
    { value: 'Ipsum', selected: false, },
    { value: 'Dolor', selected: false, },
    { value: 'Sit', selected: false, },
    { value: 'Amet', selected: false, },
  ]

  values$ = new BehaviorSubject(this.values);

  available$ = this.values$.pipe(
    map(items => items.filter(item => !item.selected))
  );
  selected$ = this.values$.pipe(
    map(items => items.filter(item => item.selected))
  );

  select(item) {
    item.selected = true;
    this.values$.next(this.values);
  }

  unselect(item) {
    item.selected = false;
    this.values$.next(this.values);
  }
}

Collectives™ on Stack Overflow

Angular 2 add/remove/select all - item from array

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related