Angular filter array inside array - arrays

Question

I'm working in an Angular 9 app and I need to filter an array based on another array inside each object. To understand me here is an example of the array
const products = [
{
name: 'Product 1',
origins: [
{ quantity: 1, name: 'Pack 1' },
{ quantity: 1, name: 'Pack 2' },
]
},
{
name: 'Product 2',
origins: [
{ quantity: 1, name: 'Pack 1' },
{ quantity: 1, name: 'Pack 2' },
]
},
{
name: 'Product 3',
origins: [
{ quantity: 1, name: 'Inventory' },
{ quantity: 1, name: 'Pack 5' },
]
}
]
So I got a filter input which has to filter the products by a coincidence on the name of the product or one or more origin's name.
For example, if I type "2" the result array must be:
products = [
{
name: 'Product 1',
origins: [
{ quantity: 1, name: 'Pack 2' },
]
},
{
name: 'Product 2',
origins: [
{ quantity: 1, name: 'Pack 2' },
]
}
]
Because the character "2" is in the name of origin of Product 1 and Product 2, also is present in the name "Product 2"
I tried many things to do this but the result array always modifies my original array when I put this in a pipe
<input type="text" [(ngModel)]="searchtext">
<div *ngFor="let p of (saleProducts | filter : searchtext); let i = index">
{{ p.name }}
<div *ngIf="p.origins.length > 0">
<div *ngFor="let o of p.origins">
{{ o.name }}
</div>
</div>
</div>
What is the best (simple and optimized) way to filter this using a pipe without modifying the original array?

Answer 1

below a pipe implementation to with a default key origins:
import { Pipe, PipeTransform } from '#angular/core';
#Pipe({
name: 'filter'
})
export class FilterPipe implements PipeTransform {
transform(value: any[], searchName: string, key = 'origins'): any[] {
const products = []
value.forEach(product => {
const matches = product[key].filter(({ name }) => name === searchName)
if (matches.length) {
products.push({ ...product, [key]: matches })
}
})
return products
}
}