Angular 6 com uma função para delay

criando uma função para retornar uma promise com o setTimeout.

Angular 6 função de delay com promise.

Navegando na internet encontrei um trecho de código que mostra como fazer para criar uma função que simula um delay usando o setTimeout e retornando um promise achei muito interessante e resolvi fazer uma pequena implementação dela no Angular só para brincar.

O autor original do post é o James K. Nelson, que inclusive tem um curso de JavaScript se quiser conhecer é só acessar o link.

Bom vamos ao código, primeiro vamos gerar um projeto básico com o angular cli 6 e adicionar o bootstrap e o sweetalert2 só pra melhor um pouco a cara do projeto.

$ ng new sample-delay --style scss
$ cd sample-delay
$ yarn add bootstrap sweetalert2
$ code .

Uma vez o projeto criado eu uso o Visual Studio Code para editar os meus códigos, agora e só incluir as implementações desejadas.

Primeiro incluir o css do bootstrap e o css do sweetalert2 no arquivo style.scss como no exemplo abaixo.

Agora é alterar o arquivo app.component.ts e incluir o código como no exemplo abaixo.

Por último vamos alterar o arquivo app.component.html e incluir o código de front do nosso projeto.

Agora é só rodar o projeto e testar o nosso mini projeto de exemplo.

$ ng serve

E o resultado final vai ser uma tela como a mostrada abaixo.

Angular 6 com delay

Esse foi só um projeto de exemplo que criei baseado na ideia de uma função assíncrona delay com suporte a promise e async/await. o código completo do projeto está no github.