How do I create a filter pipe to filter mat-cards?

Question

I am trying to add a search filter pipe to filter the cards in the html, but I can't seem to figure out how to do it, any ideas?

The code is below is to give an idea of the result i'm trying to achieve, if you need any other information just ask :) thanks

list.component.html

<mat-card id="search">
  <mat-form-field class="recipe-form">
    <input type="text" matInput placeholder="search by restaurant" value="restaurant">

   </mat-form-field>
 </mat-card>

 <mat-card id="details" *ngFor="let recipe of list">
     <mat-card-title>{{ recipe.name }}</mat-card-title>
     <mat-card-subtitle>Place: {{ recipe.place }}</mat-card-subtitle>
     <mat-card-subtitle>Rating: {{recipe.rating}}</mat-card-subtitle>
     <mat-card-subtitle>Notes: {{recipe.notes}}</mat-card-subtitle>
     <mat-card-actions>
       <button (click)="goMap(recipe)" mat-button><mat-icon>map</mat-icon></button>
       <button (click)="share(recipe)" mat-button><mat-icon>share</mat-icon></button>
       <button (click)="goDetails(recipe)" mat-button><mat-icon>list</mat-icon></button>

     </mat-card-actions>
  </mat-card>

  <a id="btnCreate" mat-fab routerLink="/recipe"><mat-icon>create</mat-icon></a>

Pipe

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
    name: 'filter',
})
export class FilterPipe implements PipeTransform {
    transform(items: any[], value: string, prop: string): any[] {
        if (!items) return [];
        if (!value) return items;
        return items.filter(singleItem =>
        singleItem[prop].toLowerCase().startsWith(value.toLowerCase())
        );
    }
}

    **HTML**
    https://pastebin.com/W4puyRRZ

    **TS**
    https://pastebin.com/bYvG7iQR

    **Pipe**
    https://pastebin.com/a9sJYt0S

Hi Caitlin, your question should contain snippets of the code, so people don't have to open external links. If the code is too long, then you should narrow down the question/code, because then its properbly too broad. — Bjarne Gerhardt-Pedersen, Apr 02 '20 at 14:49
Hi guys, sorry I couldn't get it to let me put the code in, but sorted it now, any help would be appreciated, it doesn't need to be a pipe just a way to filter mat-cards with a search :) — Caitlin Rebecca Holden, Apr 02 '20 at 19:17

How do I create a filter pipe to filter mat-cards?

0 Answers0