remove
remove
Removes one or multiple items from an array T[]. For comparison you can provide
a key, an array of keys, or a custom comparison function that returns true when
items match. If no comparison data is provided, an equality check is used by
default. Returns a new array T[] and does not mutate the original one.
Immutability is explained in the immutability & serializable state concept.
Example — removing values without comparison data
const items = [1, 2, 3, 4, 5];
const updatedItems = remove(items, [1, 2, 3]);
// updatedItems will be: [4, 5];
Example — removing values with a comparison function
const creatures = [
{ id: 1, type: 'cat' },
{ id: 2, type: 'unicorn' },
{ id: 3, type: 'kobold' },
];
const nonExistingCreatures = [
{ id: 2, type: 'unicorn' },
{ id: 3, type: 'kobold' },
];
const realCreatures = remove(creatures, nonExistingCreatures, (a, b) => a.id === b.id);
// realCreatures will be: [{id: 1, type: 'cat'}];
Example — removing values with a key
const realCreatures = remove(creatures, nonExistingCreatures, 'id');
// realCreatures will be: [{id: 1, type: 'cat'}];
Example — removing values with an array of keys
const realCreatures = remove(creatures, nonExistingCreatures, ['id', 'type']);
// realCreatures will be: [{id: 1, type: 'cat'}];
Example — with rxState()
import { Component } from '@angular/core';
import { Subject } from 'rxjs';
import { rxState } from '@rx-angular/state';
import { remove } from '@rx-angular/cdk/transformations';
@Component({
/* ... */
})
export class ListComponent {
readonly removeCreature$ = new Subject<Creature>();
private readonly state = rxState<ComponentState>(({ connect }) => {
connect('creatures', this.removeCreature$, ({ creatures }, creatureToRemove) => remove(creatures, creatureToRemove, (a, b) => a.id === b.id));
});
readonly creatures = this.state.signal('creatures');
// Imperative alternative
removeCreature(creatureToRemove: Creature): void {
this.state.set({
creatures: remove(this.state.get('creatures'), creatureToRemove, (a, b) => a.id === b.id),
});
}
}
Example — signals-first
import { signal } from '@angular/core';
import { remove } from '@rx-angular/cdk/transformations';
const creatures = signal<Creature[]>([]);
creatures.update((current) => remove(current, creatureToRemove, (a, b) => a.id === b.id));
Edge cases
remove(null as any, items) > null;
remove(items, null as any) > items;
remove(null as any, null as any) > null;
remove(undefined as any, undefined as any) > undefined;
remove(nonArray as any, items) > nonArray;
Signature
function remove<T>(source: T[], scrap: Partial<T>[] | Partial<T>, compare?: ComparableData<T>): T[];