Olá Pessoal, fui seguindo as video aulas do curso mas meu filtro das fotos pelo nome não funciona. Mesmo adicionando o (keyup)="0" na views.
Aonde estou errando?
foto.pipes.ts
import { Pipe, PipeTransform } from '@angular/core';
import { FotoComponent } from './foto.component';
@Pipe({
name: 'filtroPorTitulo'
})
export class FiltroPorTitulo implements PipeTransform {
transform(fotos: FotoComponent[], digitado: string) {
digitado = digitado.toLowerCase();
return fotos.filter( foto => foto.titulo.toLowerCase().includes(digitado));
}
}foto.component.ts
import { Component, Input } from '@angular/core';
@Component({
moduleId: module.id,
selector: 'foto',
templateUrl: './foto.component.html'
})
export class FotoComponent {
@Input() titulo: string;
@Input() url: string;
descricao: string;
}listagem.component.html
<div class="jumbotron">
<h1 class="text-center">Alurapic</h1>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<form>
<div class="input-group">
<span class="input-group-btn">
<!-- router carrega a view solicitada sem regarregar toda a app -->
<a [routerLink]="['/cadastro']" class="btn btn-primary">
Nova foto
</a>
</span>
<!-- campo para filtrar pelo titulo -->
<input class="form-control" #textoProcurado (keyup)="0"
placeholder="filtrar pelo título da foto">
</div>
</form>
</div> <!-- fim col-md-12 -->
</div> <!-- fim row -->
<br>
<div class="row">
<painel *ngFor="let foto of fotos" titulo="{{foto.titulo}}" class="col-md-2">
<foto titulo="{{foto.titulo}} | filtroPorTitulo: textoProcurado.value" url="{{foto.url}}"></foto>
</painel>
</div><!-- fim row -->
</div>app.module.ts
import 'rxjs/add/operator/map';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser'; //informa a plataforma do app
import { AppComponent } from './app.component';
import { FotoModule } from './foto/foto.module';
import { HttpModule } from '@angular/http';
import { PainelModule } from './painel/painel.module';
import { CadastroComponent } from './cadastro/cadastro.component';
import { ListagemComponent } from './listagem/listagem.component';
import { routing } from './routes';
@NgModule ({
//Módulos que são importados na view
imports: [
BrowserModule,
FotoModule,
HttpModule,
PainelModule,
routing,
],
//componentes que fazem parte do módulo
declarations: [
AppComponent,
CadastroComponent,
ListagemComponent
],
// Informa o primeiro componente a ser carregado
bootstrap: [ AppComponent ]
})
export class AppModule {
}