ERROR TypeError: Cannot read property 'filter' of undefined

Estou tentando fazer meu filtro funcionar mas quando carrego, ele dá o erro ERROR TypeError: Cannot read property 'filter' of BuscarFornecedorComponent.html:9 undefined.

Dá erro no meu html na parte de invocar o filtro:

buscar-fornecedor.component.html:

<div class="col-md-6 text-center mt-3 mb-3">
    <div class="input-group h2">
        <input name="data[search]" class="form-control" id="search" type="text"         placeholder="Pesquisar" autofocus
        (keyup) = "filter = $event.target.value">
        <span class="input-group-btn">
        </span>
    </div>
</div>
<app-card-resultado [pjs] = "pjs | filtroPelaCidade: filter" ></app-card-resultado>

Meu pipe:

import { Pipe, PipeTransform } from '@angular/core';
import { PessoaJuridica } from 'src/app/pessoa/pessoa-juridica';
@Pipe({  name: 'filtroPelaCidade'})
export class FiltroPelaCidadePipe implements PipeTransform {
  transform(pjs: PessoaJuridica[], cidade: string): any {
    cidade = cidade.trim().toLowerCase();
    if (cidade) {
      return pjs.filter(pj => pj.bairro.toLowerCase().includes(cidade));
    } else {
        return pjs;
    }
  }
}

card-resultado.component.ts:

import { OnInit, Component, Input } from '@angular/core';
import { PessoaJuridica } from 'src/app/pessoa/pessoa-juridica';
import { HomeService } from '../../home.service';

@Component({
    selector: 'app-card-resultado',
    templateUrl: './card-resultado.component.html',
    styleUrls: ['./card-resultado.component.css']
})

  export class CardResultadoComponent implements OnInit {

    @Input() pjs: PessoaJuridica[] = [];

    constructor(private homeService: HomeService){ }

    ngOnInit(): void {
        this.listarFornecedores();
    }

    public listarFornecedores(){

        this.homeService.listarFornecedores().subscribe(pjs => this.pjs = pjs);
    }
}

card-resultado.component.html:

<p-table [value] = "pjs">
    <ng-template pTemplate="body" let-pj>
        <tr>
            <td>{{pj.razaoSocial}}</td>
            <td>{{pj.cidade}}</td>
            <td>{{pj.bairro}}</td>
        </tr>
    </ng-template>
</p-table>

buscar-fornecedor.component.ts:

import { Component, OnInit } from '@angular/core';
import { PessoaJuridica } from 'src/app/pessoa/pessoa-juridica';
import { ActivatedRoute, Router } from '@angular/router';

@Component({
    selector: 'app-buscar-fornecedor',
    templateUrl: './buscar-fornecedor.component.html',
    styleUrls: ['./buscar-fornecedor.component.css']
})

export class BuscarFornecedorComponent implements OnInit{

    filter: string = '';
    pjs: PessoaJuridica[] = [];
    pj: PessoaJuridica;

    constructor(private activatedRoute: ActivatedRoute, private router: Router) {

        this.router = router;
    }

    ngOnInit(): void {
        this.pjs = this.activatedRoute.snapshot.data['pjs'];
    }

}