Boa tarde,
Estou com problemas nessa aula, criei o componente, mas preferi criar por linha de comando:
ng g c photos/photo-list/search
exatamente pra atualizar o "photo-list.module.ts", verifiquei e o SearchComponent esta configurado no module, atualmente o "PhotoListModule" esta assim:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LoadButtonComponent } from './load-button/load-button.component';
import { PhotosComponent } from './photos/photos.component';
import { PhotoListComponent } from './photo-list.component';
import { FilterByDescription } from './filter-by-description.pipe';
import { PhotoModule } from '../photo/photo.module';
import { SearchComponent } from './search/search.component';
@NgModule({
declarations:[
LoadButtonComponent,
PhotosComponent,
PhotoListComponent,
FilterByDescription,
SearchComponent
],
imports:[
CommonModule,
PhotoModule
]
})
export class PhotoListModule{}
o "photo-list.component.html" esta assim:
<ap-search></ap-search>
<p *ngIf="!photos.length" class="text-center text-muted">
Sorry, no photos
</p>
<ap-photos [photos]="photos | filterByDescription: filter"></ap-photos>
<app-load-button (click)="load()" [hasMore]="hasMore"></app-load-button>
o search.component.html:
<div class="text-center mt-3 mb-3">
<form>
<i aria-hidden="true" class="fa fa-search mr-2"></i>
<input
class="rounded"
type="search"
placeholder="search..."
autofocus
(keyup)="debounce.next($event.target.value)">
</form>
</div>
assim está o search.component.ts:
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subject } from 'rxjs';
import { debounceTime } from 'rxjs/operators';
@Component({
selector: 'ap-search',
templateUrl: './search.component.html',
styleUrls: ['./search.component.css']
})
export class SearchComponent implements OnInit, OnDestroy {
private debounce: Subject<string> = new Subject<string>();
private filter: string = "";
constructor() { }
ngOnInit() {
this.debounce
.pipe(debounceTime(300))
.subscribe(filtro => this.filter=filtro);
}
ngOnDestroy(): void {
this.debounce.unsubscribe();
}
}
alguem pode me dar uma ajuda?