A continuacion le agrego un ejemplo.
busca-categoria.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'buscaCategoria'
})
export class BuscaCategoriaPipe implements PipeTransform {
transform(value: any, ...args: any[]): any {
const resultPost = [];
for(const entrada of value){
if (entrada.indexOf(args) > - 1) {
resultPost.push(entrada);
};
};
return resultPost;
}
}
App.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { environment } from '../environments/environment';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { BuscaCategoriaPipe } from './busca-categoria.pipe';
import { SearchComponent } from './search/search.component';
import { ListaComponent } from './lista/lista.component';
@NgModule({
declarations: [
AppComponent,
BuscaCategoriaPipe,
SearchComponent,
ListaComponent
],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Search.Component.ts
import { Component, OnInit, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-search',
templateUrl: './search.component.html',
styleUrls: ['./search.component.scss']
})
export class SearchComponent implements OnInit {
search: string = '';
@Output() buscar = new EventEmitter();
constructor() { }
ngOnInit(): void {
}
onEnter(value: string) {
this.search = value;
this.buscar.emit(this.search);
}
}
Search.Component.html
<input #box (keyup.enter)="onEnter(box.value)">
Lista.Component.ts
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-lista',
templateUrl: './lista.component.html',
styleUrls: ['./lista.component.scss']
})
export class ListaComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
@Input() filtro;
words: string [] = [
'firstName',
'lastName',
'addressLineOne',
'addressLineTwo',
'city',
'country',
'postalCode',
'phone',
'age',
'email',
'edit',
'delete'
];
}
Lista.Component.html
<div *ngFor="let item of words | buscaCategoria: filtro">
{{ item }}
</div>
App.Component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'stackoverflow';
filtro: string;
Buscar(filtro){
this.filtro = filtro;
}
}
app.component.html
<div>
<!-- Press enter after typing the search work -->
<app-search (buscar)="Buscar($event)"></app-search>
<app-lista [filtro] = "filtro"></app-lista>
</div>
Espero esto le ayude con su problema.