mais_templates - VWJavascript/Alurapic GitHub Wiki

Mais templates

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

import { Component } from '@angular/core';
import { Http } from '@angular/http';
import { FotoComponent } from '../foto/foto.component';
import { FotoService } from '../foto/foto.service';
import { PainelComponent } from '../painel/painel.component';

@Component({
    moduleId: module.id,
    selector: 'listagem',
    templateUrl: './listagem.component.html' 
})
export class ListagemComponent { 

    fotos: FotoComponent[] = [];
    service: FotoService;
    mensagem: string = '';

    constructor(service: FotoService) {
        this.service = service;

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

    remove(foto: FotoComponent, painel: PainelComponent) {

        this.service
            .remove(foto)
            .subscribe(
                () => {

                    painel.fadeOut(() => {

                        let novasFotos = this.fotos.slice(0);
                        let indice = novasFotos.indexOf(foto);
                        novasFotos.splice(indice, 1);
                        this.fotos = novasFotos;
                        this.mensagem = 'Foto removida com sucesso';
                    }); 
                }, 
                erro => {
                    console.log(erro);
                    this.mensagem = 'Não foi possível remover a foto';
                }
            );

    }
}

Declarando mais uma vez variáveis no template

Por fim, só precisamos alterar o template de ListagemComponent para que passe, além da foto, o painel. Vamos lançar mão mais uma vez de variável local, de template. Criaremos uma para termos uma referência para o painel:

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

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

<div class="row">
    <painel #painel *ngFor="let foto of fotos | filtroPorTitulo: textoProcurado.value" titulo="{{foto.titulo | uppercase}}"  class="col-md-2">
        <a [routerLink]="['/cadastro', foto._id]">
            <foto titulo="{{foto.titulo}}" url="{{foto.url}}"></foto>
        </a>
        <br>
        <botao confirmacao="true" nome="Remover" estilo="btn-danger btn-block" (acao)="remove(foto, painel)"></botao>
    </painel>
</div><!-- fim row -->

Agora, quando removemos um foto, seu painel inteiro vai ficando translúcido até desaparecer.

⚠️ **GitHub.com Fallback** ⚠️