filtering problem – How to filter mat cards in angular

I'm doing an angular project and wondering how I can filter / search for mat cards that have details (name, description) of different components. I have a search box at home.component.html to filter the cards, but since all the information inside the mat cards comes from different components and backend, I'm not sure how. Any suggestion will be really helpful.

I have pipeline to filter and search box.

This is how I reuse cards from different components in my home.component.html and ts file.


You currently have 0 public workspaces


export class ExploreComponent implements OnInit, OnDestroy {

 pubWorkspaces: Workspace() = ();
  loading: boolean = false;

  constructor(private workspaceService: WorkspaceService, private router: Router) { }

ngOnInit(): void {

    this.loading = true;
    this.workspaceService.getUserWorkspaces().subscribe((workspaces) =>{

    workspaces.forEach(workspace => {
      if(workspace.type == WorkspaceType.public){
    this.loading = false;
    }, ()=>this.loading = false)

My search pipe

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

name: 'search',
pure: true
export class SearchPipe implements PipeTransform {
transform(names: string(), query: string): string() {
  if (!query || !names) {
    return names;

  return names.filter(name => name.toLowerCase().indexOf(query.toLowerCase()) > -1);