exibindo_mensagens_para_o_usuario - VWJavascript/Alurapic GitHub Wiki
Nossa aplicação ja remove fotos, mas que tal exibirmos uma mensagem para o usuário dizendo que a foto de nome tal foi removida?
O primeiro passo é adicionarmos a propriedade mensagem em ListagemComponent que guardará a mensagem de remoção:
// alurapic/client/app/listagem/listagem.component.ts
// código anterior omitido
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) {
this.service
.remove(foto)
.subscribe(
() => {
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';
}
);
}
}Agora, vamos adicionar parágrafo no template de ListagemComponent que exibirá a mensagem apenas se ela for definida. Aprendemos a utilizar a diretiva ngIf para exibição condicional.
<!-- alurapic/client/app/listagem/listagem.component.html -->
<div class="jumbotron">
<h1 class="text-center">Alurapic</h1>
</div>
<div class="container">
<p *ngIf="mensagem.length" class="alert alert-info">{{mensagem}}</p>
<!-- código posterior omitido -->Na direiva ngIf usamos a expressão "mensagem.length". Em JavaScript, 0 é avaliado como falso, sendo assim, se nenhuma mensagem for definida na propriedade mensagem ela terá como valor uma string vazia e seu length será 0. Dessa forma, só exibiremos o parágrafo quando mensagem conter uma string diferente de branco.