How can I filter data using cards and not data tables in angular 8?

Question

I'm trying to filter data using cards but I haven't managed to filter it using cards and not data table

example:

import { Component, OnInit } from '@angular/core';
import {MatTableDataSource} from '@angular/material/table';

@Component({
  selector: 'app-publicaciones',
  templateUrl: './publicaciones.component.html',
  styleUrls: ['./publicaciones.component.css']
})
export class PublicacionesComponent implements OnInit {
  private users = ['Fabio', 'Leonardo', 'Thomas', 'Gabriele', 'Fabrizio', 'John', 'Luis', 'Kate', 'Max'];
  
  dataSource = new MatTableDataSource(this.users);
  constructor() { }

  ngOnInit() {
  }

  applyFilter(filterValue: string) {
    this.dataSource.filter = filterValue.trim().toLowerCase();
  }

}

.container {
    max-width: 900px;
    justify-items: center;
    justify-content: center;
    text-align: center;
    margin: auto;
    max-width: 80%;
    padding-left: 80px;
    padding-top: 8%;
}

.example-card {
    padding-left: 105px;
}

.example-full-width {
    width: 100%;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    grid-gap: 20px;
    padding-left: 100px;
    align-items: stretch;
}

.example-card-two {
    max-width: 400px;
}

.example-header-image {
    background-image: url('https://material.angular.io/assets/img/examples/shiba1.jpg');
    background-size: cover;
}

<div class="container">
    <mat-card class="example-card">
        <mat-card-header>
            <mat-form-field class="example-full-width">
                <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
            </mat-form-field>
        </mat-card-header>

        <mat-card-content class="grid">


            <mat-card class="example-card-two" *ngFor="let user of users">
                <mat-card-header>
                    <div mat-card-avatar class="example-header-image"></div>
                    <mat-card-title>Shiba Inu</mat-card-title>
                    <mat-card-subtitle>Dog Breed</mat-card-subtitle>
                </mat-card-header>
                <mat-card-content>
                    <p>
                        {{user}}
                    </p>
                </mat-card-content>
                <mat-card-actions>
                    <button mat-button>LIKE</button>
                    <button mat-button>SHARE</button>
                </mat-card-actions>
            </mat-card>
        </mat-card-content>

    </mat-card>

</div>

Practically so far I have the data burned using an ngfor but that doesn't help me since I would like to filtan according to name or tags

Any idea how I could do this kind of filtering or how I could do it?, seriously would be very good for a university project

You need a SearchPipe over there, I created one for a project, I will add it in no minute for your reference. — AlokeT, Oct 31 '19 at 09:47

score 7 · Accepted Answer · answered Oct 31 '19 at 09:48

7

You can access the filtered data of the datasource with this.dataSource.filteredData.

<mat-card class="example-card-two" *ngFor="let user of this.dataSource.filteredData">
    <mat-card-header>
        <div mat-card-avatar class="example-header-image"></div>
        <mat-card-title>Shiba Inu</mat-card-title>
        <mat-card-subtitle>Dog Breed</mat-card-subtitle>
    </mat-card-header>
    <mat-card-content>
      <p>
         {{user}}
      </p>
    </mat-card-content>
    <mat-card-actions>
        <button mat-button>LIKE</button>
        <button mat-button>SHARE</button>
    </mat-card-actions>
</mat-card>

answered Oct 31 '19 at 09:48

JuNe

1,911
9
28

Do you think we have same performances when using a pipe? – IsraGab Nov 08 '20 at 21:38
Yes, I think so but I am not sure about performance when there is a lot of data to filter. If you want an exact answer you have to test it yourself. – JuNe Nov 09 '20 at 08:05

AlokeT · Answer 2 · 2019-10-31T10:57:24.983

In another way you can achieve this by creating Angular Pipe.

search.pipe.ts

 import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'search'
})
export class SearchPipe implements PipeTransform {

  public transform(value: any, keys: string, term: string) {
    if (!term) {
      return value;
    }
    return (value || []).filter((item) => keys.split(',').some(key => item.hasOwnProperty(key) && new RegExp(term, 'gi').test(item[key])));
  }

}

and in your html you can use it like:

<mat-card-content class="grid">


            <mat-card class="example-card-two" *ngFor="let user of users | search:'firstName,lastName,emailId,phoneNo,tags,etc':searchTerm">
                <mat-card-header>
                    <div mat-card-avatar class="example-header-image"></div>
                    <mat-card-title>Shiba Inu</mat-card-title>
                    <mat-card-subtitle>Dog Breed</mat-card-subtitle>
                </mat-card-header>
                <mat-card-content>
                    <p>
                        {{user}}
                    </p>
                </mat-card-content>
                <mat-card-actions>
                    <button mat-button>LIKE</button>
                    <button mat-button>SHARE</button>
                </mat-card-actions>
            </mat-card>
        </mat-card-content>

EDIT:

Add Pipe into AppModule.ts as well to work,

@NgModule({
  declarations: [
    SearchPipe,
   /** other Imports **/
  ],

And this will filter accordingly ;)

Excuse me, how could I implement your pipe in what I've already done? and tried but I still can't implement it @AlokeT — Steven Colocho, Oct 31 '19 at 10:52

How can I filter data using cards and not data tables in angular 8?

2 Answers2