A ideia é limpar o filtro apenas quando o usuário clicar em "load more". Porém, é preciso que o componente SearchComponent esteja preparado para isso, porque é ele quem contém o campo que queremos limpar. Foi por isso que foi adicionado em SearchComponent a inbound property (a famosa @Input()) chamada "value".
// SearchComponent é usado em PhotoAddComponent
<app-search [value]="filter" .......></app-search>
Entenda essa propriedade como uma porta de entrada para o SearchComponent no qual o valor passado para ela será o valor passado para a tag <input>
dentro do SearchComponent, aquela no qual digita o filtro. Código do template de SearchComponent:
<input [value]="value" ..........>
O [value] é a propriedade value que toda tag input
tem, já o "value' é a inbound property @Input() value
. Poderia ser qualquer nome, mas eu escolhi 'value', o mesmo nome da propriedade do input.
Quando load more é chamado, ele modifica a propriedade filter
que esta associada com SearchComponent através de [value]="filter"
. Se eu digitei "Flávio", o valor de filter será "Flávio' e será passado para o SearchComponent Dentro do SearchComponent vemos que "value" (@Input()) esta associada com a tag <input>
. Isso significa que toda vez que mudarmos o valor de filter
em photo add component, estaremos mudando o valor do input dentro SearchComponent.
Veja o método load. Ele esta mudando o valor de filtro
:
load() {
this.photoService
.listFromUserPaginated(this.userName, ++this.currentPage)
.subscribe(photos => {
this.filter = ''; // AQUI! quando load é executado, o valor do filtro é limpo e esta mudança aqui é passada para o SearchComponent até chegar no input
this.photos = this.photos.concat(photos);
if(!photos.length) this.hasMore = false;
});
}