CODEWITHSUNDEEP
javascriptangulartypescript
Angulandy2
Angulandy2

Reputation: 806

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

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.

Upvotes: 0

Views: 1432

Answers (2)

user4676340
user4676340

Reputation:

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);
  }
}

Upvotes: 1

Marian
Marian

Reputation: 4079

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.

Upvotes: 2

Related Questions