As fotos vêm do nosso servidor, mas na hora de exibi-las quero que o título seja exibido em caixa-alta, em uppercase. Como resolver? Alterar os dados que chegaram através de http em nosso componente? Não, porque se alterarmos lá, estaremos mudando o dado e não queremos mudar a informação, apenas sua apresentação. Queremos que o título da foto passe por um tubo e dentro dele seja processado para que na outra extremidade tenhamos o título em caixa alta.

No mundo da programação, o tubo (pipe) geralmente é representado por |. Já encontrou esse caractere especial no seu teclado? Pode procurar, eu espero.

Vamos alterar a AE {{foto.titulo}} e adicionar o pipe no template do nosso componente ListagemComponent:

<!-- alurapic/client/app/listagem/listagem.component.html -->

<!-- código anterior omitido -->
<div class="row">
        <painel *ngFor="let foto of fotos" titulo="{{foto.titulo |}}" class="col-md-2">
            <foto titulo="{{foto.titulo}}" url="{{foto.url}}">
            </foto>
        </painel>
</div><!-- fim row -->
<!-- código posterior omitido -->

Muito bem, adicionamos um pipe que gerará uma transformação no título da foto. Infelizmente ele não fez "curso Mãe Diná" para saber qual transformação realizar. Angular já vem por padrão com algumas transformações. Vamos usar a uppercase, palavra que deve ser adicionada logo após nosso pipe:

<!-- alurapic/client/app/listagem/listagem.component.html -->
<!-- código anteriorr omitido -->
<div class="row">
        <painel *ngFor="let foto of fotos" titulo="{{foto.titulo | uppercase}}" class="col-md-2">
            <foto titulo="{{foto.titulo}}" url="{{foto.url}}">
            </foto>
        </painel>
</div><!-- fim row -->
<!-- código posterior omitido -->

Vejamos o resultado:

Excelente, uma pequena alteração estética, mas que tal uma alteração mais substancial, que possa melhorar a experiência dos nossos usuário?

Podemos realizar mais uma melhoria antes de partirmos para a tela de cadastro. Hoje, nosso componente ListagemComponent exibe uma lista de fotos, uma lista não tão grande. Contudo, imagine que, com o tempo, o número de fotos vá aumentando.

Como faremos para encontrar determinada foto? Tudo bem que podemos procurar uma a uma, mas podemos melhorar nossa experiência permitindo filtrar a exibição das fotos pelo título. Eu quero ser capaz de digitar Fute e apenas as fotos que contenham como parte do seu título o texto Fute sejam exibidas. Primeiro, vamos alterar alurapic/client/app/listagem/listagem.component.html e adicionar um campo para receber nosso filtro, ao lado do botão:

<!-- alurapic/client/app/listagem/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">
                        <a [routerLink]="['/cadastro']" class="btn btn-primary">
                            Novo foto
                        </a>
                    </span>

                    <!-- campo para filtrar pelo titulo -->
                    <input class="form-control" 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}}" url="{{foto.url}}">
            </foto>
        </painel>
    </div><!-- fim row -->
</div>

Queremos filtrar é a nossa lista de fotos, por isso vamos adicionar um | para filtrar a lista recebida em nosso ngFor:

<!-- alurapic/client/app/listagem/listagem.component.html -->
<!-- código anterior omitido -->
    <div class="row">
        <painel *ngFor="let foto of fotos | filtroPorTitulo" titulo="{{foto.titulo}}" class="col-md-2">
            <foto titulo="{{foto.titulo}}" url="{{foto.url}}">
            </foto>
        </painel>
    </div><!-- fim row -->
<!-- código posterior omitido -->

Estamos usando o filtro filtroPorTitulo, que será aplicado na lista utilizada para diretiva ngFor. Porém, o filtro precisa saber pelo o que filtrar, vamos alterá-lo:

<!-- alurapic/client/app/listagem/listagem.component.html -->
<!-- código anterior omitido -->
    <div class="row">
        <painel *ngFor="let foto of fotos | filtroPorTitulo:textoProcurado.value" titulo="{{foto.titulo}}" class="col-md-2">
            <foto titulo="{{foto.titulo}}" url="{{foto.url}}">
            </foto>
        </painel>
    </div><!-- fim row -->
<!-- código posterior omitido -->

Nosso filtroPorTitulo filtrará a lista de fotos, exibindo aquelas que contenham parte do texto definido na variável textoProcurado.value. Entretanto, nem nosso filtro, nem a variável existem! Precisamos criá-los. Primeiro, vamos atacar a variável. Em Angular, podemos criar variáveis locais diretamente no template da diretiva:

<!-- alurapic/client/app/listagem/listagem.component.html -->
<!-- código anterior omitido -->

 <input class="form-control" #textoProcurado  
            placeholder="filtrar pelo título da foto">

<!-- código posterior omitido -->

É por meio do prefixo # que criamos variáveis locais. Nossa variável #textoProcurado armazena o elemento no qual ela foi adicionada, ou seja, ela guarda nosso input. Sendo uma variável local, podemos acessá-la em qualquer lugar do nosso template. Veja que ela é diferente da variável criada com let na diretiva ngFor, que possui como escopo apenas o elemento no qual a diretiva foi associada.