2
respostas

Não entendi como o Flavio limpou o campo search

Pessoal, a partir do momento 7:07 do vídeo, eu não entendi o que o Flavio fez para os componentes "se conversarem" e conseguir limpar tanto a property filter quanto principalmente o valor que tinha digitado no campo search. Alguém poderia me explicar essa forma que ele usou?

2 respostas

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

Olá Flavio, eu li sua resposta e assisti novamente essa aula algumas vezes, ainda assim pra mim está meio confuso hehe. Sou iniciante no typescript, espero que avançando no seu curso eu possa compreender melhor sobre as inbound properties e estes conceitos.