Não entendi como o Flavio limpou o campo search | Angular parte 1: produtividade e organização com framework SPA

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;
        });
}