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.

HTML

         
You currently have 0 public workspaces

TS

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.pubWorkspaces.push(workspace);
      }
    });
    this.loading = false;
    }, ()=>this.loading = false)
}

My search pipe

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

@Pipe({
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);
}
}
```