Angular-Loiane-Training

Este repositorio contem exemplos documentados e descricoes dos conteudos estudados ao longo do curso de Angular da Loiane

View project on GitHub

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