I’m using angular 17 with the following code:

database.component.html

@for(user of (users | userPipe:filters); track user.id) {
    <tr id="{{ user.id }}">
        <td>{{ user.name }}</td>
        <td>{{ user.surname }}</td>
        <td>{{ user.age }}</td>
    </tr>
}
@empty {
    <tr>
        <td colspan="3">Empty</td>
    </tr>
}

“filters” is a string array with some keywords which should return any matching database entries.

database.pipe.ts

@Pipe({
    name: 'userPipe',
    pure: false
})
export class databasePipe implements PipeTransform {
    transform(values: Users[], filters: string[]): Users[] {
        
        if (!filters || filters.length === 0 || values.length === 0) {
            return values;
        }

        return values.filter((value: User) => {
            filters.forEach(filter => {
                const userNameFound = value.name.toLowerCase().indexOf(filter.toLowerCase()) !== -1;
                const userSurnameFound = value.surname.toLowerCase().indexOf(filter.toLowerCase()) !== -1;
                const ageFound = value.age.toLowerCase().indexOf(filter.toLowerCase()) !== -1;

                if (userNameFound || userSurnameFound || ageFound) {
                
                    console.log("value: ", value);
                    return value;
                }
                return "";
            });
        });
    }
}

It is working and I can see matching entries with “value: ” in the browser console just fine but my “filtered” table just returns “Empty” and no data is shown.

Any one knows why this happens?