PIPE ASYNC
Este pipe pode ser utilizado para renderizar elementos que dependem da saida de um valor que pode demorar para ser retornado, como exemplo o acesso ao banco de dados para retornar informacoes. Sao usados em conjunto com as interfaces Promise
ou Observable
UTILIZANDO PROMISE
No primeiro exemplo, vamos utilizar a interface Promise
. Vamos declarar uma variavel chamada valorAsync
e utilizar a funcao setTimeout()
para simular o tempo de resposta do servidor.
component:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-pipe-async',
templateUrl: './pipe-async.component.html',
styleUrls: ['./pipe-async.component.css']
})
export class PipeAsyncComponent implements OnInit {
// interface Promise armazenada em uma variavel
valorAsync = new Promise((resolucao, rejeicao) =>
setTimeout(() => resolucao('valor Assincrono'), 2000)
)
constructor() { }
ngOnInit(): void {
}
}
template do component:
<div>
<h3>Pipe Async</h3>
<div>
</div>
</div>
o comportamento do exemplo implementado seguira com a renderizacao dos components e apos o timeout de 2s o conteudo da variavel valorAsync
sera exibido no template.
figura 1 - pipe antes do timeout
figura 2 - pipe depois do timeout (apos 2 segundos)
para exemplificar melhor vamos implementar o template sem o pipe async. para o caso onde nenhum pipe e aplicado o valor retornado e o tipo do objeto, ja que no momento da renderizacao o valor nao foi retornado.
div>
<h3>Pipe Async</h3>
<div>
<!-- sem pipe implementado -->
</div>
</div>
figura 3 - template sem pipe implementado
podemos aplicar o pipe json (nativo do Angular), para ver o conteudo do objeto.
<div>
<h3>Pipe Async</h3>
<div>
<!-- pipe json implementado -->
</div>
</div>
figura 4 - pipe json implementado antes do timeout
figura 2 - pipe json implementado depois do timeout (apos 2 segundos)
note que o valor e armazenado no atributo __zone_symbol__value
apos decorrido o tempo de timeout.
#
UTILIZANDO OBSERVABLE
de forma similar a implementacao anterior podemos utilizar a interface Observable
conforme o exemplo a seguir, o comportamento ira manter-se igual.
component:
import { Component, OnInit } from '@angular/core';
import { interval } from 'rxjs';
import { map } from 'rxjs/operators'
@Component({
selector: 'app-pipe-async',
templateUrl: './pipe-async.component.html',
styleUrls: ['./pipe-async.component.css']
})
export class PipeAsyncComponent implements OnInit {
// observable
valorAsync = interval(2000).pipe(map(valor => 'Valor Assincrono'))
constructor() { }
ngOnInit(): void {
}
}
o template mante-se inalterado.
para mais informacoes sobre observable
leia a documentacao oficial do Angular The RxJS library