Durante a criação do nosso cadastro de fotos realizamos vários testes, muitas vezes gravando fotos com nomes esquisitos e muitas vezes com a URL da imagem inválida. Vamos implementar a funcionalidade de exclusão de fotos começando pela adição do botão Remover que ficará dentro de PainelComponent e logo abaixo de FotoComponent:

<!-- 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 | uppercase}}"  class="col-md-2">
        <foto titulo="{{foto.titulo}}" url="{{foto.url}}">
        </foto>
        <button class="btn btn-danger btn-block" >Remover</button>
    </painel>
</div><!-- fim row -->

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

Sabemos que em algum momento esse botão terá que chamar algum método do nosso componente ListagemComponent para realizar a operação de exclusão. Vamos criá-lo:

// alurapic/client/app/listagem/listagem.component.ts

// código anterior omitido 

export class ListagemComponent { 


    // código anterior omitido 
    remove(): void {

        console.log('Olá, você acabou de chamar o método remove :)');
    }
}

Mais uma associação de eventos (event binding) É claro que ainda falta implementarmos o método remove do nosso componente ListagemComponent, mas primeiro precisamos resolver outro problema, a associação do clique do botão com o método remove. Lembre-se que o Angular possui diferentes tipos de associação (binding), desta vez, queremos realizar uma associação de evento (event binding).

Já aprendemos a realizar esse tipo de associação que flui da nossa view para o componente quando implementamos o filtro da nossa lista. Neste tipo de associação, adicionamos o nome do evento entre parênteses como atributo do elemento algo do evento. Sendo assim, vamos adiciona o atributo (click) no botão "Remover". A diferença desta vez é que o valor do atributo será uma expressão e não apenas "0" como fizemos com o evento input do nosso filtro.

A expressão que utilizaremos é "remove()", a chamada o método remove. Angular entende que o escopo da nossa view é o componente por isso encontrará o método em ListagemComponent:

<!-- 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 | uppercase}}"  class="col-md-2">
        <foto titulo="{{foto.titulo}}" url="{{foto.url}}">
        </foto>
        <button class="btn btn-danger btn-block" (click)="remove()" >Remover</button>
    </painel>
</div><!-- fim row -->    

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

Já podemos testar e verificar se o método é chamado verificando a saída no console do browser. Agora, precisamos implementar o método para que realmente remova a nossa foto, porém como ele saberá qual foto estamos removendo?

Lembre-se que a diretiva estrutural ngFor declara uma variável local chamada foto. Sendo uma variável, pode ser acessada dentro de qualquer expressão. Que tal se passarmos a variável como parâmetro do método remove?:

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

<div class="row">
    <painel *ngFor="let foto of fotos | filtroPorTitulo: textoProcurado.value" titulo="{{foto.titulo | uppercase}}"  class="col-md-2">
        <foto titulo="{{foto.titulo}}" url="{{foto.url}}">
        </foto>
        <button class="btn btn-danger btn-block" (click)="remove(foto)">Remover</button>
    </painel>
</div><!-- fim row --> 

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

Quando clicarmos no botão "Remover" da terceira foto, por exemplo, a função remove receberá o objeto foto usado para construir o terceiro painel e assim por diante. Contudo, nosso método ainda não recebe como parâmetro uma foto. Vamos adicioná-lo, inclusive já definindo seu tipo:

// alurapic/client/app/listagem/listagem.component.ts 

// código anterior omitido 

export class ListagemComponent { 

    fotos: FotoComponent[] = [];

    constructor(service: FotoService) {

        service.lista()
            .subscribe(
                fotos => this.fotos = fotos,
                erro => console.log(erro)
            );
    }


    remove(foto: FotoComponent): void {

        console.log(foto.titulo);
    }
}

Veja que agora estamos imprimindo o título da foto no console. Um teste mostra pefeitamente que se clicarmos para remover a segunda foto, será impresso o título da segunda foto no console.